CSS — Web Fonts

Beyond system fonts

System stacks are fast but generic. Web fonts load a specific typeface with the browser:

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

body {
    font-family: "Inter", system-ui, sans-serif;   /* always keep a fallback */
}

The two preconnect lines warm up the connection — measurably faster font delivery.

Choosing from Google Fonts

1. Search, preview with your own text
2. Select weights deliberately: 400 (body) + 700 (bold) is often enough; add 600 for headings if needed
3. Each weight/style = another file download — five weights quadruple the cost

Popular pairings that always work: Inter + Georgia · Playfair Display + Source Sans · Space Grotesk + Inter.

@font-face — self-hosting

@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-700.woff2") format("woff2");
    font-weight: 700;
}

Self-hosting pros: no third-party request, caching control, GDPR-friendliness. WOFF2 is the only format modern browsers need.

font-display — the loading behavior

Value	Behavior
swap	show fallback instantly, swap when ready ✓ default choice
block	invisible text up to 3s ("FOIT" flash)
fallback	brief block, then swap window
optional	only use if already cached — zero layout shift

swap balances personality and speed; optional for perfectionist CLS scores.

FOUT vs FOIT vs layout shift

• FOUT (flash of unstyled text) — swap's tradeoff; mitigate by matching fallback metrics
• Size-adjust trick aligns fallback widths:

@font-face {
    font-family: "InterFallback";
    src: local("Arial");
    size-adjust: 105%;
    ascent-override: 90%;
}

Variable fonts — one file, all weights

@font-face {
    font-family: "Inter var";
    src: url("inter-var.woff2") format("woff2-variations");
    font-weight: 100 900;     /* entire range! */
}

h1 { font-weight: 650; }     /* any value, not just steps */

One download replaces six files and unlocks fine-grained weights. Most Google Fonts offer variable versions (family=Inter:wght@100..900).

Licensing in one line

Check it. Free-for-web ≠ free-for-logo/embedding. Google Fonts (OFL) covers web use safely.

Performance rules: max 2 families · max ~4 weights · woff2 only · preconnect · display:swap · subset exotic scripts.

Mini Practice

1. Add Inter (400/700) via Google Fonts with preconnects.
2. Self-host one weight with @font-face + swap.
3. Build heading/body pairing: Playfair Display + Source Sans.
4. Test offline behavior of swap vs block vs optional.
5. Switch to a variable font; try font-weight: 550.

Next: text effects →