Stop Web Fonts Causing Layout Shift in Two CSS Declarations

Cumulative Layout Shift has one cause that survives every other optimisation: the moment your web font arrives and every line of text reflows because the fallback was a different size.

Preloading helps. Self-hosting helps. Neither removes the shift, because the two fonts still have different metrics.

The fix

Declare a fallback face whose metrics are adjusted to match your web font, then use it in the stack.

• Define an @font-face rule with src: local('Arial') — or whichever system font you are falling back to — and give it a name like Inter-fallback.
• On that rule, set size-adjust, ascent-override, descent-override and line-gap-override so the fallback occupies the same vertical space as the real font.
• Put the adjusted fallback in your font-family stack immediately after the web font.

The numbers are per-font-pair and you do not need to work them out by hand: the Fontaine and Capsize tooling generates them, and Next.js does it automatically for fonts loaded through next/font.

While you are in there

• `font-display: swap` for body copy — text appears immediately in the fallback and swaps when the real font loads. With a metric-matched fallback, the swap is invisible.
• `font-display: optional` for anything where a swap would still be jarring. The browser uses the web font only if it is ready almost immediately, and otherwise sticks with the fallback for that visit.
• Preload only the fonts used above the fold. Preloading six weights competes for bandwidth with your largest contentful paint.
• Subset your fonts. A Latin-only subset of a typical variable font is a fraction of the full file, and most sites ship the full file without ever rendering a Cyrillic character.

Why it is worth five minutes

CLS is scored as good at 0.1 or below at the 75th percentile of real visits, and font swap is one of the few causes that hits every single page of a site at once. It is also the cheapest of the three Core Web Vitals to fix — no architecture change, no build pipeline, two declarations and a fallback definition.