Font Loading Strategies: Optimizing Web Font Performance

Web fonts define a site's visual identity, but they come at a cost. Default browser behavior hides text for up to three seconds while fonts load—a phenomenon known as FOIT (Flash of Invisible Text). Balancing typography against performance requires a deliberate loading strategy.

font-display: Controlling the Swap Behavior

The CSS font-display descriptor tells the browser how to handle the font loading period:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
}

• swap: Shows fallback text immediately, swaps when the font loads. Best for most content text—users start reading right away.
• optional: Gives the font a 100 ms window to load. If it doesn't make it, the fallback remains permanently. Ideal for icons or decorative type.
• block: Hides text for up to 3 seconds. Avoid this—it guarantees FOIT.

For body text, swap with careful fallback sizing is the standard choice.

Font Subsetting: Ship Only What You Need

A typical typeface contains hundreds of glyphs for languages you may never serve. Subsetting strips unused characters, often reducing file size by 60–80%.

Use the glyphhanger CLI or pyftsubset:

npx glyphhanger https://example.com --formats=woff2 --subset=*.ttf --whitelist=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

This scans your pages for used characters and creates a minimal subset. For multilingual sites, create separate subsets per language and load only the required one:

@font-face {
  font-family: 'NotoSans';
  src: url('/fonts/noto-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

The unicode-range descriptor ensures the browser downloads the font only when a character in that range appears on the page.

Variable Fonts: One File, Many Weights

Variable fonts store an entire weight and width axis in a single file, replacing dozens of individual font files. Inter Variable at 250 KB replaces 12 separate weight files totaling over 2 MB.

:root {
  --font-weight: 400;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: var(--font-weight);
}

h1 {
  --font-weight: 700;
}

The compression advantage of variable fonts compounds with subsetting. A subsetted variable font for Latin characters can be as small as 35 KB.

Preloading Critical Fonts

Font files discovered late in the stylesheet parsing order may not start downloading until after the render-blocking phase. Preload the primary font:

<link
  rel="preload"
  href="/fonts/inter-var.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

The crossorigin attribute is required for fonts loaded from a different origin, even your own CDN. Without it, the preload is ignored.

Use preload only for the font that renders above-the-fold text. Preloading every font file wastes bandwidth and can delay other critical resources.

Fallback Font Alignment

When the font swaps in, text reflows if the fallback occupies different space. Use the size-adjust and ascent-override descriptors in @font-face to align the fallback to the web font's metrics:

@font-face {
  font-family: 'Fallback';
  src: local('Arial');
  size-adjust: 98%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

This minimizes Cumulative Layout Shift (CLS) during the font swap. Tools like Font Style Matcher or the @capsize library can calculate the exact adjustments.

A Complete Font Loading Strategy

A production-ready approach combines several techniques:

1. Subset every font to Latin-only (plus needed diacritics)
2. Use a single variable font for all weights
3. Preload the font used by the hero heading
4. Set font-display: swap on all fonts
5. Align fallback metrics with size-adjust
6. Serve as WOFF2 only—older formats are dead weight

The result: fast initial paint with system fonts, a near-imperceptible swap to your custom typeface, and zero layout shift. Typography that loads quickly is typography that actually gets seen.

Need expert help optimizing your web font delivery? Our custom UI/UX design team integrates performance-first typography into every project.