Web Font Loading Strategy

Also Known As

TL;DR

Explanation

Font loading problems: FOIT (Flash of Invisible Text) — browser hides text while font downloads; FOUT (Flash of Unstyled Text) — fallback font shown then swaps; CLS (Cumulative Layout Shift) — font metric difference causes layout reflow. Solutions: font-display: swap (show fallback immediately, swap when loaded — eliminates FOIT but allows FOUT), font-display: optional (use font only if already cached), preloading critical fonts (<link rel=preload as=font>), font subsetting (only include used characters), self-hosting (avoids external DNS lookup), and size-adjust + ascent-override to match fallback font metrics (eliminates CLS).

Common Misconception

Why It Matters

Common Mistakes

• Not preloading critical fonts — they are discovered late in the render pipeline.
• Loading all weights and variants — load only the weights/styles actually used.
• Google Fonts without self-hosting — extra DNS lookup + connection adds 100-400ms latency.
• No fallback font metrics adjustment — causes layout shift when web font loads.

Code Examples

/* Loading fonts without display strategy — FOIT:
@font-face {
    font-family: 'MyFont';
    src: url('font.woff2');
    /* No font-display — browser hides text for 3 seconds */
}
/* Slow connection: 3-second invisible text */

/* Optimised font loading: */
@font-face {
    font-family: 'MyFont';
    src: url('font.woff2') format('woff2');
    font-display: swap;         /* Show fallback immediately */
    unicode-range: U+0000-00FF; /* Subset: Latin only */
}

/* Match fallback metrics to minimise CLS: */
@font-face {
    font-family: 'MyFont-fallback';
    src: local('Arial');
    size-adjust: 104%;          /* Match web font's cap height */
    ascent-override: 95%;
}
body { font-family: 'MyFont', 'MyFont-fallback', sans-serif; }

<!-- Preload critical font: -->
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

References

• ↗ https://web.dev/articles/font-best-practices

Tags

Related Terms