How to Fix Font Layout Shift
If your text jumps or changes when a page loads, your webfont is probably replacing a fallback font of a different size. You can reduce that jump a lot with a few lines of CSS.
What’s happening?
There are two common effects. With a flash of invisible text (FOIT), the text stays blank until the font arrives. With a flash of unstyled text (FOUT), a fallback appears first and then swaps. If the two fonts differ in size, lines rewrap and the content moves. That movement counts toward Cumulative Layout Shift (CLS), one of Google’s Core Web Vitals.
Choose a font-display value
- swap shows text at once and swaps when the font is ready. It’s the common choice, but it can cause a shift.
- optional uses your font only if it arrives very quickly. It avoids a late swap, which suits body text on speed-focused sites.
- fallback sits between the two, with a short wait and a limited time to swap.
Match your fallback font
This is the most effective fix. You create a fallback that uses a system font, resized to take up about the same space as your webfont. When the swap happens, very little moves:
@font-face {
font-family: "Brand Sans Fallback";
src: local("Arial");
size-adjust: 104%;
ascent-override: 96%;
descent-override: 28%;
line-gap-override: 0%;
}
body {
font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}You don’t need to work out these numbers yourself. In the Webfont Generator, open CSS, choose a Matched fallback font, and the tool measures your font and writes the rule.
Other things that help
- Preload your main font, so it arrives before the first paint where possible.
- Keep font files small, as covered in our guide to faster webfonts.
- Avoid mixed sources. Serving fonts from your own domain removes an extra connection.
Check your score
Run the Page Speed Test and look at CLS. A good score is 0.1 or less. To see the swap yourself, throttle your connection in your browser’s developer tools and reload the page.
