Performance
font-display
font-display is the CSS descriptor that says whether text waits for its web font, shows in a fallback, or swaps once loaded. It sits inside an `@font-face` rule.
How it is measured
The values are `auto`, `block`, `swap`, `fallback`, and `optional`. They change a block period during which text is invisible and a swap period during which a late font may still replace the fallback.
Check the effect in a filmstrip for invisible text, and in layout shift entries for the size difference at swap. Chrome shows font requests and timing in the Network panel.
Worked example
A landing page uses `font-display: block` for a 62 KB heading font that arrives at 2,700 ms on slow 4G. The headline is invisible until then, which hurts LCP at 2,750 ms. Switching to `swap` shows the fallback at 1,400 ms, but the swap moves lines and adds 0.08 of CLS.
Using `optional` plus a preload and a size-adjusted fallback gives LCP of 1,450 ms and CLS of 0.01, at the cost of some first visits keeping the fallback.
How it differs
font-display controls text visibility timing. Cumulative Layout Shift can result when the swap changes the text size. Critical CSS that includes the `@font-face` rule affects when the font even starts to load. The property decides what to show, not when the file arrives.
Common errors
Leaving the default `auto`, which usually blocks. Using `swap` without a matched fallback and causing a shift. Loading ten weights. Forgetting to preload the one font used in the hero. Self-hosting fonts but serving them without long cache headers.
In practice
Pick `swap` or `optional` for body and heading fonts. Preload the single most visible font file, use `size-adjust` and related descriptors on a fallback, and check CLS and LCP afterwards.