Skip to content

Performance

How to stop web fonts blocking text

Without `font-display`, the browser hides the text while it waits for the font file — the flash of invisible text. On a slow connection that can be seconds of a blank-looking page that has already loaded everything it needs.

What 13x checks

This is rule performance.font-display in the public registry: Web fonts do not block text. It runs on every audit, against the pages we actually fetched, and its result is derived from the response rather than estimated.

Surface
Performance
Score weight
4 of the readiness score
Scope
Runs on every audited page
Applies
Only where the market or the page shape makes it relevant

Registry version 2026-07-30. Every rule is published, and the audit is deterministic — the same page produces the same finding every time.

The fix

The same text the audit hands you when this check fails on your own site.

Tell the browser what to render while a web font is still downloading.

For a Google Fonts URL, add the parameter — this is the whole fix:

html code
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
  rel="stylesheet"
/>

For self-hosted fonts, add the descriptor to each @font-face:

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

Which value to use:

- `swap` — show the fallback immediately, swap when the font arrives. The right default for body text: content is readable from the first paint. - `optional` — show the fallback and abandon the web font if it is slow. Best for a font that is nice to have; eliminates the layout shift entirely. - `block` — invisible text for up to 3s. Only defensible for a logotype.

Pair swap with a fallback that has similar metrics, or the swap itself causes a visible reflow:

css code
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}

Framework-specific versions

Where the change differs enough to be worth writing out separately.

Does your site have this problem?

13x checks this and 112 others against your live URL in about 30 seconds. No account, and every finding comes with the fix for your framework.

No signup. Results in 30 seconds.

More performance checks