CSS Fonts

Hello, web design enthusiasts! Today, we’re diving into the world of CSS Fonts. If you’ve ever wondered how to make your website text look just right, you’re in the right place!

Understanding CSS Font Properties

CSS gives us a bunch of properties to style our text. Let’s break them down:

font-family

This property sets the typeface of your text. You can specify multiple fonts as a “fallback” system, in case the browser doesn’t support the first font.

p {
  font-family: Arial, sans-serif;
}

Output

If you run the above code online Clicking the “Run this Code Online” button, you will see how the above CSS code is styling above HTML.

font-style

Want italic text? This is your property. It accepts normal, italic, and oblique.

p {
  font-style: italic;
}

font-variant

This property can make your text small-caps. It’s like shouting, but classier.

p {
  font-variant: small-caps;
}

font-weight

This property sets how thick or thin characters in text should be displayed.

p {
  font-weight: bold;
}

font-size

This one’s self-explanatory. It sets the size of your font.

p {
  font-size: 16px;
}

font-stretch

This property allows you to make text wider or narrower.

p {
  font-stretch: expanded;
}

font

The font property is a shorthand property for font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

p {
  font: italic small-caps bold 1em/1.5em Arial, sans-serif;
}

@font-face

This rule allows custom fonts to be loaded on a webpage.

@font-face {
  font-family: "MyCustomFont";
  src: url("myfont.woff2") format("woff2");
}

font-feature-settings

This property allows control over advanced typographic features in OpenType fonts.

p {
  font-feature-settings: "kern" 1;
}

CSS Font Families

There are five generic families that can be used:

• Serif fonts have small lines at the ends on some characters (Times New Roman, Georgia).
• Sans-serif fonts have clean lines (Arial, Verdana).
• Monospace fonts have characters that each take up the same amount of horizontal space (Courier New, Lucida Console).
• Cursive fonts mimic human handwriting (Brush Script MT).
• Fantasy fonts are decorative/playful (Western, ITC Kristen).

CSS Font Sizing

Font sizes can be absolute (specified in px, pt, cm, etc.) or relative (em, %, larger, smaller). For responsive design, consider using viewport units (vw, vh, vmin, vmax).

CSS Font Styling

You can style your text with font-style, font-variant, and font-weight. Transform text with the text-transform property (uppercase, lowercase, capitalize).

CSS @font-face Rule

Want to use a fancy custom font that isn’t available by default in browsers? No problem! The @font-face rule lets you load a font from your server or a CDN.

Code Examples

Let’s see some of these properties in action:

Example 1: Using CSS font properties

p {
  font-family: "Courier New",

monospace;
  font-style: italic;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 20px;
}

h1 {
  font-family: "Arial", sans-serif;
  font-size: 2em;
  text-transform: uppercase;
}

In this example, the paragraph text will be displayed in a bold, italic, small-caps font. The heading text will be displayed in uppercase Arial.

Example 2: Implementing @font-face with a custom font

@font-face {
  font-family: "MyCustomFont";
  src: url("MyCustomFont.woff2") format("woff2");
}

body {
  font-family: "MyCustomFont", Arial, sans-serif;
}

In this example, we’re loading a custom font from a .woff2 file. If the custom font can’t be loaded, the browser will try Arial, then sans-serif.

CSS Font Feature Settings

OpenType fonts come with a bunch of cool features that you can control with font-feature-settings. For example, you can control kerning, ligatures, and stylistic sets.

Wrapping Up

Mastering CSS Fonts is a key step in becoming a web design Jedi. With these properties in your toolkit, you can make your website text look exactly how you want it to.

Frequently Asked Questions

Related Tutorials

• CSS Layouts: From beginner to advanced in 1 page.
• Understanding CSS Box Model: Develop your knowledge on CSS box models.
• CSS Flexbox: A comprehensive tutorial on the fundamental concept of flexbox in CSS.

And that’s a wrap! You’re now a CSS Fonts whiz. Go forth and make beautiful web text!