How do I load web fonts without layout shift?

Preload the one or two font files used above the fold, set a font-display value, and choose a fallback font with similar proportions. Together these make text appear quickly and keep the swap to the final font small enough that headings and paragraphs barely move, which protects your Cumulative Layout Shift score.

Why it matters

A web font is a file the browser must download. Until it arrives, the browser either shows text in a fallback font or hides the text briefly. When the real font arrives, letter widths and line heights usually differ, so text may reflow and push other content. That movement counts as layout shift, and a late font can also delay the Largest Contentful Paint when the largest element is a heading.

How to do it

Use modern, small files. Serve fonts as WOFF2 and include only the character sets and weights you use. Self-hosting from your own domain avoids an extra connection to another host.
Preload the key font. In the head of the page, add:

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

The crossorigin attribute is required for fonts, even when they come from your own domain. Without it the preload is wasted. Preload only the one or two files seen at the top of the page, since each preload competes with other resources.

Set font-display. In the @font-face rule choose a behaviour:

@font-face {
  font-family: "Body";
  src: url("/fonts/body-regular.woff2") format("woff2");
  font-display: swap;
}

swap shows fallback text immediately and switches when the font loads. optional uses the web font only if it is ready almost at once, which avoids a visible swap entirely.

Match the fallback. CSS descriptors such as size-adjust, ascent-override and descent-override in a fallback @font-face can make a system font occupy nearly the same space as your web font, so the swap moves little.
Test. Throttle the network in Chrome DevTools and record a page load. Look at the Layout Shifts track and the Network waterfall for the font request.

Common mistakes

Preloading every weight and style on the site.
Leaving out crossorigin on the preload link.
Using font-display: block on large headings, which can hide them for a while.
Loading an icon font just for a few symbols.
Choosing a fallback font with very different widths.

Frequently asked questions

Should I use font-display: swap or optional?

Use swap when you want the brand font to always appear, accepting a small shift. Use optional when avoiding movement matters most and the font can be skipped on slow first visits.

Do Google Fonts cause layout shift?

Any web font can if the fallback differs. Preloading, font-display and a matched fallback help whichever source you use.

Can I skip web fonts completely?

Yes. System fonts load instantly and cannot shift. Many fast sites use them for body text.

Crawvix's scan checks that web fonts load without errors. To see your result, Try the free website sample.