Make text readable while fonts load

Why this matters

Web fonts add requests and bytes. Depending on the chosen display behavior, text may wait for a font or switch from a fallback after it arrives, which can affect perceived speed and move page content.

Keep only the variants you use

Inventory font families, weights, styles, and character sets in the rendered page. Remove unused variants and subset only when the needed languages and symbols are understood.

Choose a fallback and display policy

Set `font-display` deliberately so text has a useful fallback if the font is delayed. Compare fallback metrics and layout; `swap` can introduce movement when the custom face replaces it.

@font-face {
  font-family: "Site Sans";
  src: url("/fonts/site-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

Preload sparingly

If one font file is definitely used in the first viewport and is discovered late, consider preloading that exact file with the correct type and cross-origin mode. Do not preload every weight or a font not used on the page.

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

Reserve stable text geometry

Compare line breaks, button widths, and heading heights between fallback and web fonts. Adjust fallback choice or font metric overrides where appropriate, then watch layout-shift measurements.

For your setup

Check your work

• Inspect font requests, transfer sizes, and whether a preload is reused.
• Disable cache or throttle the network to see fallback behavior.
• Check heading wrapping, button dimensions, and CLS before and after the font swap.
• Test the languages and special symbols your site actually publishes.