Which font-display value should I use?

Use swap for body text you want readable immediately, and optional when avoiding any late swap matters more than showing the web font on a first visit. Avoid block for body text because it hides text for up to about three seconds.

Does font-display: swap cause CLS?

It can. Swapping from a fallback to a web font with different metrics re-flows text and moves content below it. Matching the fallback's size and vertical metrics with size-adjust and the override descriptors keeps that shift small.

Should I preload web fonts?

Preload the one or two files needed for above-the-fold text, with crossorigin set. Preloading every weight competes with other critical resources and can make the page slower.

font-display and layout shift: loading web fonts without CLS

Use font-display: swap or optional, preload only the one or two critical font files, and make the fallback font occupy the same space with the size-adjust, ascent-override and descent-override descriptors. Then the swap from fallback to web font barely moves anything.

Why fonts move pages

A browser that needs a web font has three options while the file downloads: hide the text, show it in a fallback font, or give up on the web font. When the web font finally arrives and differs in width, height or line spacing from the fallback, every line re-wraps and content below it jumps. That jump counts towards Cumulative Layout Shift (CLS), one of Google’s Core Web Vitals; web.dev describes a CLS of 0.1 or less as good.

What each font-display value does

The font-display descriptor in @font-face sets how long text stays invisible (“block period”) and how long a late font may still be swapped in (“swap period”):

Value	Block period	Swap period	Best for
`block`	short (around 3 s in practice)	infinite	Icon fonts, where fallback glyphs are meaningless
`swap`	extremely small	infinite	Body and headings that must be readable at once
`fallback`	extremely small (about 100 ms)	short (about 3 s)	Text where a very late swap is not worth it
`optional`	extremely small	none	Performance-first pages; web font used if cached or very fast
`auto`	browser decides	browser decides	Avoid; behaves like block in most browsers

The Google Fonts CSS API sets the value through its display= parameter; display=swap is the usual choice.

Make the fallback the same size

The modern fix is to tune the fallback font so it occupies the same box as the web font. CSS Fonts Level 4 provides four descriptors for a local fallback face:

size-adjust scales the glyphs (and so the width of every line);
ascent-override and descent-override set the vertical metrics;
line-gap-override sets the extra line gap.

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
body { font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif; }

The percentages shown are illustrative. Compute real values from the two fonts’ metrics (units per em, ascender, descender, average character width); tools such as the Fontaine and Capsize projects automate it, and some frameworks generate fallback faces at build time. Browser support for the override descriptors differs, so check MDN’s compatibility tables; unsupported descriptors are simply ignored.

Preload the critical file only

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

The crossorigin attribute is required even for same-origin fonts, otherwise the preloaded file is not reused. Preload the one file used above the fold: usually the regular weight of the body font, or a variable file covering all weights.

Reduce what must load

Subset. Latin-only sites do not need Cyrillic or Vietnamese glyphs. CJK sites need slicing (see subsetting Korean and CJK fonts).
Fewer files. One variable file can replace several static weights (variable fonts explained).
Self-host to avoid extra connections to other origins (self-hosting guide).
Cache for a year with immutable file names.

Reserve space for things that swap

Even with tuned fallbacks, give fixed-height boxes to elements whose size depends on a font, such as one-line headlines in cards or specimen rows. On Fontwell’s proofing desk, each specimen row has a fixed height and clips overflow, so loading 48 different fonts from Google does not move the list.

How to check your result

Open Chrome DevTools, throttle the network, and record a Performance trace; layout shifts appear as “Layout Shift” entries with the moved elements.
Compare a cold load with a warm (cached) load.
Watch the field data in Search Console’s Core Web Vitals report or the Chrome UX Report after release, because lab tests miss slow real-world networks.

Frequently asked questions

Which font-display value should I use?: Use swap for body text you want readable immediately, and optional when avoiding any late swap matters more than showing the web font on a first visit. Avoid block for body text because it hides text for up to about three seconds.
Does font-display: swap cause CLS?: It can. Swapping from a fallback to a web font with different metrics re-flows text and moves content below it. Matching the fallback's size and vertical metrics with size-adjust and the override descriptors keeps that shift small.
Should I preload web fonts?: Preload the one or two files needed for above-the-fold text, with crossorigin set. Preloading every weight competes with other critical resources and can make the page slower.

Sources

Facts checked against the sources above as of 16 Oct 2026. Licence explanations are general information, not legal advice; read the licence shipped with the font you use. Spotted an error? Tell us.