Fonts, Loading, and the Flash You Keep Seeing
You've seen it on your own site. The page loads, text appears in something plain, then a beat later it snaps into your actual typeface and the layout shifts slightly.
That's a font loading problem, and it's one of the more visible performance issues because it happens right where people are reading.
What's actually going on
Web fonts are files that must be downloaded before text can be drawn in them. The browser has a choice while it waits: show nothing, or show a fallback.
Show nothing and you get a flash of invisible text — a page that looks broken for a moment and, worse, delays your Largest Contentful Paint if your headline is the biggest element.
Show the fallback and you get a flash of unstyled text — visible, readable, and then it changes.
The second is nearly always better. A reader can start immediately, and the swap is a cosmetic irritation rather than a blank screen.
The four fixes
1. font-display: swap. One line in your @font-face rule. Shows the fallback immediately and swaps when the real font arrives. If you change one thing, change this.
2. Preload the fonts you use above the fold. The browser doesn't discover font files until it has parsed CSS, which is late. <link rel="preload" as="font" crossorigin> starts the download immediately.
Preload only the one or two you actually need early. Preloading six defeats the purpose by competing with everything else.
3. Self-host, and subset. Self-hosted fonts avoid a third-party connection entirely — faster and more private. And most sites load full character sets covering languages they'll never serve. Subsetting to Latin characters routinely cuts font weight by half or more.
While you're there: modern formats only. A WOFF2 file is substantially smaller than the older formats, and support has been universal for years.
4. Match the fallback metrics. The layout shift when fonts swap happens because the fallback occupies different space than the real font. size-adjust, ascent-override, and descent-override in a @font-face block let you tune the fallback so the swap is nearly invisible.
This is the most technical of the four and the one that eliminates the jump rather than merely hiding it.
The decision that beats all four
Use fewer fonts.
Two families, and within each only the weights you genuinely use. Most sites load four or five weights and use two. Each unused weight is a file downloaded for nothing.
If you're loading a display face for headings and a body face for text, that's a complete typographic system. A third is usually a decision nobody remembers making.
Worth testing
Load your site with the network throttled hard and watch the text. If it's blank for a beat, you don't have swap. If it jumps, your fallback metrics don't match.
Two settings, ten minutes, and the most visible loading artefact on your site stops happening.