What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
To reduce layout shifts when a web font loads, choose a fallback with similar metrics and adjust it with the CSS font metric descriptors where needed. Choose a font-display policy for the text-visibility and late-swap behavior you want; swap alone does not prevent shifts.
Test the font pair with real content and the browsers and devices that matter to your site. No sample percentages are universal: the right values depend on the primary font, fallback, and content.
#1 Best Overall
What a font fallback is
A fallback is another font the browser can use when the requested font is unavailable, still loading, or lacks a requested character. For example, a family list can name a web font, then a local font, then a generic family.
A fallback can be used for an entire face or for individual missing glyphs. A font loading successfully does not guarantee that it contains every character your page needs.
Why fonts cause layout shifts
When a web font replaces a fallback, glyph widths and vertical metrics can change. Text may wrap differently, changing its height and moving nearby content. The Chrome for Developers article “Framework tools for font fallbacks” notes that sites using font-display: swap often experience a layout shift when the web font replaces the fallback.
font-display controls when text is shown using the requested font or a fallback. It does not make those fonts metrically compatible. Metric overrides address the mismatch; loading choices address visibility and replacement behavior.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
Choose a font-loading policy
| Value | Behavior | Trade-off |
|---|---|---|
| swap | Shows fallback text after a very short block period and allows the web font to replace it later. | Visible text can shift when the fonts have different metrics. |
| fallback | Uses a short block period and a limited period for swapping. | A font that arrives late may not replace the fallback. |
| optional | Uses a short block period and no later swap period. | The browser may keep the fallback instead of showing the web font. |
| auto or block | Behavior depends on the value: auto is user-agent controlled; block uses a short block period followed by a swap period. | Choose based on the reading experience you need, not layout stability alone. |
Preloading may help a font arrive sooner, but it does not align font metrics. Lighthouse guidance discusses pairing preload with font-display: optional to mitigate font-related layout shifts.
Adjust fallback metrics
Choose a fallback that resembles the primary font in width and vertical metrics and is available on the platforms you support. Define an adjusted fallback face and list it before the generic fallback. The values below are illustrative, not a universal preset:
@font-face { font-family: “Primary Fallback”; src: local(“Arial”); size-adjust: 98%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
body { font-family: “Site Sans”, “Primary Fallback”, sans-serif; }
Rank #3
size-adjust proportionally scales glyphs and their associated metrics. The appropriate value depends on the particular fallback font and may need width-specific tuning. The ascent-override, descent-override, and line-gap-override descriptors adjust vertical metrics.
Do not confuse the size-adjust descriptor with the separate font-size-adjust property. The property can preserve a selected metric, such as x-height, across fonts. An @font-face metric override can affect its calculation.
How to tune and verify a fallback
- Choose a fallback that is available on your target platforms and similar to the primary font in width and vertical metrics.
- Set up an adjusted fallback face and place it between the web font and generic fallback in the family stack.
- Calculate or tune the metric values for the actual font pair and faces you use. Do not treat example percentages as universal recommendations.
- Check real page content in the browsers, devices, and loading conditions that matter to your site. Look for changed line breaks, text heights, and movement around the text.
- Recheck after changing the font, fallback, or content; the correct values can differ by font face and target text.
Preloading and efficient delivery can help a font arrive sooner; MDN notes that WOFF2 generally compresses fonts more efficiently than older WOFF or OpenType formats. Neither delivery choice substitutes for checking metric compatibility.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.FAQ
Does font-display: swap prevent layout shifts?
No. It makes fallback text available quickly and allows the web font to replace it later, but different glyph widths or vertical metrics can still change wrapping and move content.
Recommended Free Tools
What is the difference between size-adjust and font-size-adjust?
size-adjust is an @font-face descriptor that scales a font face. font-size-adjust is a separate CSS property that can preserve a selected metric, such as x-height, across fonts.
Can I use the same metric values for every fallback font?
No. Values depend on the primary font, fallback font, face, and content. Calculate or tune them for the actual pairing and verify the result in the browsers and devices you support.
Does preloading a web font fix a metric mismatch?
No. Preloading can help the font arrive sooner, but it does not align the fallback and primary font metrics.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
