Fonts

The problem

A web font is a file the browser has to fetch, and it can’t lay out text properly until it has it. Until then it has to choose between two bad options: show nothing, or show the wrong font and change it later.

• FOIT, a flash of invisible text: the page has loaded, but the words aren’t there.
• FOUT, a flash of unstyled text: the words appear in a fallback font, then jump to the real one.

Both are symptoms. The real questions are when the browser finds out it needs the font, and how much it has to download. The two experiments below take those one at a time.

What each font-display value does

Every value is a different answer to “how long should I hide the text, and for how long may I still swap the font in?” The clock starts when the browser first needs the font, not when the page started loading.

auto / block

Hide the text for a short period (around three seconds in practice), then show the fallback, and swap whenever the font arrives. The browser default is usually this. On a slow connection it means a blank page.

swap

No hiding at all. Fallback text immediately, swap when ready, however late. Readable at once, but the text visibly jumps.

fallback

A very short hiding period, then fallback text, and a swap only if the font arrives within about three seconds. Otherwise the fallback is kept for this page view.

optional

A very short hiding period, then fallback, and no swap in this page view. If the font isn’t there almost immediately the page simply doesn’t use it. The font is still fetched and cached, so the next page has it. It gives no flash and no layout shift, at the price of sometimes not using your font.

“font-display: swap fixes font loading.” It fixes invisible text and nothing else. Look at the layout shift in the widget: the font still arrives late, and now the page jumps when it does. The fix for the jump is a better fallback; the fix for the lateness is fetching less, and fetching sooner.

Fetching sooner: preload

Without help, the browser only learns it needs a font after it has downloaded the CSS, built the page and found text that uses it. A preload tells it up front:

<link rel="preload" href="/fonts/plex-400.woff2" as="font" type="font/woff2" crossorigin>

The crossorigin attribute is required even for fonts on your own domain, because fonts are always fetched in CORS mode. Without it the preloaded file is ignored and downloaded a second time. Preload only the one or two fonts used above the fold. Preloading everything makes them compete with the CSS you actually need.

Swapping gracefully: a matched fallback

The jump on swap comes from the fallback and the web font having different widths and vertical metrics. You can adjust a local fallback so it occupies nearly the same space:

@font-face {
  font-family: "Plex Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
body { font-family: "IBM Plex Sans", "Plex Fallback", sans-serif; }

The widget’s “metric-matched” option does this and measures the effect in your browser. The letter shapes still change on swap, but lines wrap in the same places so nothing moves. Browser support for these descriptors varies, so check before depending on them.

Common misconceptions

The levers

Format

WOFF2 uses Brotli compression and is typically around 30% smaller than WOFF. Serve WOFF2 and drop the rest.

Character set

A font family can contain thousands of glyphs for many scripts. If your site is in English, a Latin subset is a fraction of the size. Tools such as pyftsubset (from fontTools) do this. Splitting by script with unicode-range lets the browser download only the ranges a page actually uses, which is how Google Fonts does it.

Number of weights

Every weight and style is its own file and its own request. Four weights is four files. Most designs need two.

Variable fonts

One file holds a range of weights (and sometimes width or slant). It’s larger than a single static weight and smaller than several, so the chart shows a break-even point. They also give you every in-between weight for free: font-weight: 100 900 in @font-face.

Self-hosting

A third-party font host adds another DNS lookup and connection before the font can even start, and browsers no longer share a cached copy between sites, so the old “it’s probably already cached” argument has gone.

The correct approach depends on your design. If you use one weight for body text and one for headings, two Latin WOFF2 files is hard to beat. If you rely on many weights, a variable font may be smaller and simpler. Measure the result, because real font files differ from these typical sizes.

How this site does it

This page uses two self-hosted variable fonts, Latin only, in WOFF2. The framework downloads them at build time, preloads the main one and generates a metric-matched fallback automatically. There is no request to a font host at runtime. The “fully optimised” preset in the widget is the same recipe.

See it on a real page

1. Open DevTools, then Network, filter to Font. Check the number of files, their size and when they start. A font that starts late was discovered late.
2. Throttle to “Slow 4G” and reload. If the page is blank for a while, you’re seeing FOIT; if text jumps, FOUT.
3. Ask the page which fonts it actually loaded:

   document.fonts.forEach((f) => console.log(f.family, f.weight, f.style, f.status));

4. Lighthouse’s “Ensure text remains visible during webfont load” and “Preload key requests” audits flag the same things.

Model assumptions