Design Font Loading Without Layout Shift

Performance & Reliability · performance, typography, loading

Updated 2026-07-28

Decide what happens in the moment before your fonts arrive. There is always a gap, and the only question is whether the user sees fallback text, no text, or a reflow.
Prefer showing fallback text immediately over hiding it. Invisible text makes a page look broken, while a brief style change looks like a page that is loading.
Choose a fallback with similar metrics to the real face, then tune its size and spacing so the swap barely moves anything. Most of the visible jump comes from mismatched line height, not from letterforms.
Self-host your faces. A third party stylesheet adds a connection, a redirect, and a privacy question to the critical path of every page.
Ship only the weights and character ranges you use. Four weights of two families in every language is a large download for a page that shows two of them.
Preload only the faces used above the fold. Preloading everything competes with the image the user is actually waiting to see.
Subset aggressively but keep the characters your content needs, including accents, currency symbols, and punctuation your writers actually type.
Check the fallback state deliberately by blocking the font files. If the page is unreadable or unrecognisable without them, the type system is too fragile.

Typography that only works after a download is typography that fails on the first visit, which is the visit that matters most.