Module 3 · Typography · Lesson 2 of 3

CSS Fonts & Web Fonts

Beginner ⏱ 15 min2 sections · 1 exercise · 4-question quiz

Typography is 90% of design, and fonts are its voice. Learn the stack, the loading, and the weights — then never ship a default Times New Roman page again.

1. Font stacks: always have a fallback

CSS — a resilient stack

body {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}
code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

The browser walks the list until it finds an installed (or loaded) face, so the generic keyword at the end — sans-serif, serif, monospace — is your safety net. Quote family names containing spaces.

2. Web fonts and weights

HTML — loading from Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
      rel="stylesheet">

Request only the weights you use — every extra weight is download time. display=swap shows fallback text immediately, swapping when the font arrives. Weights map to font-weight: 400 regular, 600 semibold, 700 bold; pair a characterful display face for headings with a quiet workhorse for body — exactly what this site does with Space Grotesk + Inter.

💡 Audition combinations live in the Font Pairing tool before committing.

3. Try it yourself

Give the heading a Georgia, serif stack at weight 700, and the paragraph Verdana, sans-serif — then swap them and feel how the voice changes.

exercise.html — editable

4. Quiz — check your understanding

CSS Fonts & Web Fonts Quiz

4 questions · pass at 60%

Q1. Why end a font-family list with a generic keyword?

It loads fasterIt's required syntaxAs a guaranteed fallback if earlier fonts are unavailableIt enables bold

Generic families like sans-serif always resolve to something installed.

Q2. font-weight: 700 corresponds to…

LightRegularBoldItalic

400 is regular, 700 is bold on the numeric scale.

Q3. What does display=swap do when loading a web font?

Swaps fonts every secondShows fallback text immediately, then swaps in the web fontDisables the fallbackLoads two fonts at once

It prevents invisible text: readers see the fallback until the custom font arrives.

Q4. Best practice when requesting web-font weights:

Load all nine, just in caseLoad only the weights you actually useWeights don't affect load timeAlways load italic too

Each weight is a separate download — request only what the design uses.

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →

CSS Fonts & Web Fonts

1. Font stacks: always have a fallback

2. Web fonts and weights

3. Try it yourself

4. Quiz — check your understanding

CSS Fonts & Web Fonts Quiz

Practice with these generators