Font Family

You will be able to choose a typeface in CSS with font-family and build a fallback stack so text remains readable when a font is unavailable.

What it is

font-family is a CSS property that tells the browser which typeface to use for text. A font stack is a comma-separated list of font names and generic families. The browser tries each item from left to right until it finds a font it can use. If none of the named fonts are available, the generic family gives the browser a final category, such as sans-serif or serif. Related terms include generic family, system font, web font, @font-face, and the font shorthand.

Why it matters

• It keeps text readable when the first font is missing on a user's device.
• It supports brand typography without breaking layout across operating systems.
• It can improve performance by using local fonts before loading web fonts.
• It helps accessibility by allowing clear, legible fallback typefaces.
• It gives designers control over the visual tone of headings, body text, and code.

Syntax or steps

1. Choose a primary font that matches the design.
2. Add one or two fallback fonts that are likely to exist on common systems.
3. End the list with a generic family such as serif, sans-serif, monospace, cursive, or fantasy.
4. Quote font names that contain spaces, hyphens, or other characters that may be treated as CSS identifiers.

font-family: 'Primary Font', 'Fallback Font', sans-serif;

Example

<style>
body {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1 {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
}
</style>

<p>This paragraph uses the first available font in the stack.</p>

Part-by-part: body applies the stack to all page text. 'Poppins' is tried first. If it is not installed or not loaded, 'Segoe UI' is tried. If that is unavailable, Arial is tried. sans-serif is the final generic fallback. The quotes protect font names with spaces or non-standard characters. The h1 rule repeats the stack for headings, while font-weight changes only the thickness of the chosen font.

Common mistakes

• Forgetting a generic fallback. Fix: always end with a generic family such as sans-serif.
• Leaving multi-word font names unquoted. Fix: write 'Times New Roman', not Times New Roman.
• Using a font that may not exist on the user's system. Fix: add realistic fallbacks or load a web font with @font-face.
• Listing too many fonts. Fix: keep the stack short and meaningful; usually one primary font, one or two fallbacks, and one generic family are enough.

When to use it

Use font-family when you need to set only the typeface or fallback stack. Use the font shorthand when you also need to set size, line-height, weight, and style in one declaration. Use @font-face when you need to load a custom font file.

Practice

Guided exercise: Create a CSS rule for body that uses 'Georgia', then 'Times New Roman', then serif.

body {
  font-family: 'Georgia', 'Times New Roman', serif;
}

Challenge: Add a heading rule that uses a monospace stack. Expected output: headings render in a monospace font if available, otherwise the browser's default monospace font.

h1 {
  font-family: 'Courier New', monospace;
}

Quick check

Question: Why should a font stack usually end with a generic family?

Answer: It gives the browser a final fallback typeface category, so text remains styled consistently even if all named fonts are unavailable.

Summary

font-family lets you choose a typeface and define fallbacks. A good stack starts with the desired font, adds realistic alternatives, and ends with a generic family. This keeps typography reliable across devices and browsers.