Invisible text while fonts load

Showing nothing and waiting, which avoids a visible change and delays the content.

Showing a fallback immediately and swapping when the font arrives, which makes the text readable at once and shifts the layout when the metrics differ.

The default is a short invisible period followed by a fallback, which is a compromise nobody chose for the specific page.

The font-display descriptor is how the decision is made deliberately instead of inherited.

Neither option is free: one costs time, the other costs a shift, and the descriptor decides which the visitor pays.

A visitor who arrived to read something is shown nothing, which is the worst possible outcome for a text page.

The delay is invisible in testing, because a developer machine on a fast connection with the font cached never experiences it.

It is most visible to visitors on slow connections, who are also the ones least likely to wait.

And it is a self-inflicted delay: the fallback font was available the entire time.

Which is why the swap behaviour is the right default for body text on almost every site.

A fallback with different metrics occupies a different amount of space, so the text reflows when the web font arrives.

The shift is proportional to how different the two fonts are, which makes choosing a close fallback the main lever.

Metric override descriptors let the fallback's measurements be adjusted to match the web font, which reduces the shift to almost nothing.

Where a mid-read shift is the worst outcome, the optional behaviour avoids it entirely: the fallback is used for that page view and the font is cached for the next.

So the choice is between a delay, a shift, or a first visit in the fallback — and the descriptor is where it is made.

Fonts referenced only from a stylesheet are discovered after that stylesheet parses, which is several round trips into the load.

A preload declaration fixes that, and one without a crossorigin attribute causes the file to be fetched twice.

A third-party font host adds a connection — resolution, handshake, encryption — before a single byte arrives.

Loading several weights and styles multiplies the transfer, and most pages use fewer than they load.

Subsetting to the characters actually used cuts the file substantially, particularly for typefaces with large character sets.

Throttle the connection in developer tools to a slow profile and reload with the cache disabled.

Watch whether the text appears immediately in a fallback or the layout renders with no words in it.

Read the font-display descriptor in the stylesheet — its absence means the default, which is the invisible period.

Count the font files the page loads and compare against the weights it actually uses.

Check whether the fonts are preloaded and whether the preload carries a crossorigin attribute.

`performance.fonts` reports the web fonts the page references and their weight.

`performance.preload` reads the preload declarations and their consistency against the resources really used.

`performance.render_blocking` reports the resources that potentially block rendering, which is the path a font sits at the end of.

`performance.core_web_vitals` reports the rendering measurements, where both the delay and the shift show up.

The descriptor itself lives inside a stylesheet, so it is observed where that stylesheet was fetched and read.

Using a system font stack removes the question entirely: no file, no delay, no shift, no third-party connection.

The text renders in the font the visitor's device already has, which is designed to be readable on that device.

It is a design decision rather than a technical one, and it is the fastest possible answer.

Where a brand typeface matters, limiting it to headings and using a system stack for body text captures most of the benefit both ways.