Why webfonts cause a flash of unstyled text

Webfonts are loaded lazily by the browser by default. That means they are not fetched until critical resources such as CSS and JavaScript have been downloaded. For a page where a font is needed to render visible text immediately, this lazy loading behavior produces what is known as a flash of unstyled text (FOUT): the text shows in a fallback typeface first, then switches to the webfont once it arrives.

A Lighthouse performance audit on a page with webfonts will often show that those fonts sit at the end of the critical request chain — the prioritized ordering of resource fetches — even when they are needed above the fold. Because the browser does not know the fonts are essential until it has processed the CSS that declares them, they can be the last items fetched.

Preloading the requested fonts

The fix is to tell the browser up front that a given font is required immediately by adding a Link element with rel="preload" to the <head> of the document:

<head>
 <!-- ... -->
 <link rel="preload" href="https://web.dev/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>

The as="font" attribute identifies the resource type, which helps the browser place the request correctly in its priority queue. The type="font/woff2" attribute provides the format hint. The crossorigin attribute is not optional: even for same-origin fonts, omitting it causes the browser to ignore the preload, because fonts are always fetched with CORS mode.

Preloading applies a fetch to the font before the CSS is parsed. That shifts the font request to an earlier point in the loading sequence and, in some cases, removes it from the critical request chain entirely.

After preloading, run the Lighthouse audit again and compare the Maximum critical path latency section. The preloaded font no longer appears as the last resource in the chain — it is requested before the stylesheet that uses it.

Use preload selectively

Preloading only pays off for fonts that are actually needed on initial render. A font used in the page header is a good candidate; one that styles content below the fold is not. Adding preload tags for resources that are not used right away can degrade performance by creating unnecessary requests early in the page lifecycle. Limit preload tags to the few fonts the browser genuinely needs before it can paint.