TL;DR
- Font loading shifts layout when the fallback and the web font differ in width and vertical metrics.
- Reduce the font set, preload only what the first screen uses, and choose font-display on purpose.
- Test with a cold cache, using the real headings and longer copy.
A heading can render in a fallback font, then rewrap when the intended font arrives. The change might push the button below it down just as someone tries to click.
That doesn’t make web fonts a mistake. Their loading behaviour belongs in the design and performance review, and the fallback is part of the interface too.
Reproduce the change before fixing it
Test with a cold cache and a throttled connection. Watch the first screen, rather than reloading the page after the font is already cached.
Look for changes in line breaks, heading height, button width and navigation wrapping. Check the Network panel to see which font files arrive and when.
If the layout moves, confirm the cause. An image without dimensions or a late banner can also shift text. Fixing font loading won’t resolve movement that comes from elsewhere.
Reduce the font set
List the families, styles, weights and language coverage the site actually uses. A design may need one family and a limited weight range, not every file the typeface ships with.
WOFF2 is a useful delivery format for modern browsers. Subsetting can shrink the glyph set, but only if it keeps the languages and symbols the site needs and respects the font’s licence.
A variable font isn’t automatically smaller than two static files. Compare the files your actual typography requires. The same goes for an icon font containing hundreds of symbols when the site uses six.
Decide how text behaves while waiting
font-display belongs inside an @font-face rule. Its value controls how long text waits and whether a later font swap happens.
swap lets fallback text appear while the font loads. That keeps copy readable, but it can make the change visible. optional gives the browser more freedom to keep the fallback for the rest of the visit. Neither setting guarantees a perfectly stable layout.
Choose based on how important the typeface is and how good the fallback looks. If a campaign heading only fits with one particular font, it needs a layout that tolerates the fallback, not a longer period of invisible text.
Preload selectively
If a font is needed on the first screen, a preload can help the browser discover it sooner:
<link
rel="preload"
href="/fonts/brand-latin.woff2"
as="font"
type="font/woff2"
crossorigin
>The URL has to match the resource the CSS actually uses. Preloading a different subset or an unused weight adds a download without helping the heading.
Don’t preload the whole library. Fonts compete with other early resources, including the content visitors are waiting to see.
Match the fallback to the typeface
Two fonts set at the same nominal size can have different letter widths, x-heights and vertical metrics. Those differences affect line breaks and block height.
The size-adjust descriptor can scale a font face. Ascent and descent overrides can help tune a measured fallback. The font-size-adjust property works from font metrics to match apparent size. It’s a different control, and it won’t automatically match every line break.
These settings need values measured for the chosen font pair. A percentage copied from another project isn’t a reliable fix.
Test the result with the real headings, navigation labels and longer copy. Matching one heading doesn’t mean every paragraph will wrap the same way.
Keep the layout tolerant
Let buttons and navigation accommodate reasonable text growth. Avoid fixed heights that only work with the final font. Check mobile widths and zoomed text as well as desktop screenshots. The performance context for these checks is in A performance checklist for Webflow marketing sites.
After a change, repeat the cold-cache test and compare the movement. Use layout-shift diagnostics to confirm which elements moved, and check the Lighthouse reading guide for how that shows up in a report.
The useful result is readable text that arrives promptly and moves less. A preload tag or a new CSS descriptor only counts if it produces that result on the page.