CSS Fonts
In this page:
font-family and Fallback Fonts
font-family lists which typeface(s) to use, in order of preference. If the first choice isn't available on a visitor's device, the browser tries the next one in the list, ending with a generic fallback like sans-serif or serif.
Note: Always end a font-family list with a generic fallback, it guarantees text stays readable even if every named font fails to load.
Warning: Font names containing spaces, like 'Segoe UI', need to be wrapped in quotes inside the font-family value.
Example: font-family and Fallback Fonts
<style>
p {
font-family: "Segoe UI", Arial, sans-serif;
}
</style>
<p>Falls back through the list if a font isn't available</p>font-size and font-weight
font-size sets how large text renders, and font-weight sets how bold it appears, from thin (100) through normal (400) to bold (700) and beyond.
Note: Use rem units for font-size where possible, they scale consistently relative to the page's base font size and respect a visitor's browser settings.
Warning: Setting a font-weight the loaded font doesn't actually include may cause the browser to synthesize a fake bold, which can look slightly distorted.
Example: font-size and font-weight
<style>
p {
font-size: 20px;
font-weight: 700;
}
</style>
<p>Large, bold text</p>font-style and font-variant
font-style toggles italics, most commonly normal or italic. font-variant offers extra typographic options, most notably small-caps, which renders lowercase letters as smaller uppercase letters.
Note: Use italics sparingly, for emphasis or citations, since overusing them can make text harder to scan quickly.
Warning: Not every font file includes true italic glyphs; without them, the browser may generate a slanted fake italic that can look less refined.
Example: font-style and font-variant
<style>
em {
font-style: italic;
}
.caps {
font-variant: small-caps;
}
</style>
<p><em>Italic emphasis</em></p>
<p class="caps">Small caps text</p>Shorthand font Property
The font shorthand combines style, weight, size, and family into one declaration. Size and family are required, in that order, near the end of the value.
Note: The shorthand is handy once you're comfortable with the individual font properties, but the longhand versions are often clearer while learning.
Warning: The font shorthand resets any font property you don't explicitly include back to its default, which can undo settings from elsewhere.
Example: Shorthand font Property
<style>
p {
font: italic bold 18px "Segoe UI", sans-serif;
}
</style>
<p>Style, weight, size, and family in one line</p>Google Fonts and Web Safe Fonts
'Web safe' fonts (like Arial, Georgia, and Verdana) are already installed on nearly every device, so they render reliably without any extra loading. Google Fonts is a free service that lets you load custom typefaces beyond that safe list.
Note: Reach for a web safe font stack when reliability matters most, and Google Fonts when a distinctive brand typeface is worth the extra network request.
Warning: A Google Font that hasn't finished loading yet will briefly show a fallback font before swapping, which can cause a small visual flash.
Example: Google Fonts and Web Safe Fonts
<style>
.safe {
font-family: Arial, Georgia, Verdana, sans-serif;
}
</style>
<p class="safe">Web safe fonts render reliably with no extra loading</p>- Specifying only one font in font-family, with no fallback if that font fails to load.
- Using a font-weight value the loaded font file doesn't actually support, which browsers may fake or ignore.
- Forgetting to link a Google Fonts stylesheet before referencing that font name in font-family.
- font-family, font-size, font-weight, and font-style are the core building blocks of text typography.
- Always list a generic fallback (like sans-serif) at the end of a font-family list.
- Google Fonts and other font services let you use custom typefaces beyond the standard web safe fonts.
Standard CSS font properties are supported by every modern browser; Google Fonts works anywhere a browser can load an external stylesheet.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: