Fonts: preload, swap and CLS, measured

Without font-display the text with a web font stayed invisible until an LCP of 644 ms; with swap LCP is 280 ms at the same CLS of 0.0028. In our test preload made FCP worse, from 280 to 456 ms, because the font took bandwidth from the CSS.

The four variants

The 364 ms between 644 and 280 is the block period: the browser hides the text until the file arrives, and LCP waits for that text. With swap the text appears at once in the fallback font and the measured CLS stays identical.

The CSS

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: "Inter", system-ui, sans-serif;
}

Serve the file from your own origin with a long cache and immutable: the one on our site answers with max-age=31536000 and weighs 48,256 bytes. Preloading the weight used above the fold needs crossorigin, otherwise the browser downloads the file twice.

Why preload made FCP worse

Preload started the font download earlier but also pushed the CSS back: on a 1.6 Mbps link two 48 KB files compete, and first paint went from 280 to 456 ms. Preload pays off when the font really is in the first screen and the CSS is already small; it is not a universal rule.

The rules that hold

• Always set font-display: swap or optional: without it the text stays invisible for the block period. Source: web.dev, CC BY 4.0.
• Two weights per family at most. Regular alone is 48,256 bytes in woff2. Source: MDN, CC BY-SA 2.5.
• Preload only the weight used above the fold, with crossorigin. Source: MDN, CC BY-SA 2.5.
• Close the gap with size-adjust and ascent-override on the local fallback, not with an arbitrary line-height.

The limitation to name

The 0.0028 CLS is small because Times and Inter have close metrics on this text. A wider fallback produces a bigger jump, and a large heading moves far more than a paragraph. The test uses one font and one page: the choice between swap and optional depends on what the typeface is worth, not only on the number.

Where to continue

The EneUI catalogue indexes 111,985 components, for instance gooey-text-morphing, and the grid of 12,808 icons such as icon-abc. Read font-display and CLS, the preload strategy, what causes CLS and how to set a performance budget.