Web Fonts Without the Flash: font-display, Subsetting and Fallbacks

by

Typography is usually the first place a redesign gets ambitious and the last place anyone checks the performance bill. Four font families, three weights each, loaded from two origins — and suddenly your text is invisible for two seconds on a phone.

Here’s the diet version.

1. font-display decides what users see

The single highest-leverage line in your CSS:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-display: swap;
}

swap shows the fallback font immediately and swaps when the web font arrives. optional goes further: if the font isn’t cached, the browser just uses the fallback and downloads quietly for next time. For body text, optional is the honest choice — nobody abandons your article because paragraph text rendered in system-ui.

2. Subset ruthlessly

A full font file carries Cyrillic, Vietnamese, ligatures and symbols you will never render. Subsetting to latin plus punctuation typically cuts files by 60–80%. Variable fonts help too: one file replaces four weight files.

3. Preload only the one that matters

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

Preload the font your headline uses, and nothing else. Preloading five fonts just moves the traffic jam earlier.

4. Tune the fallback

The “flash” people complain about is usually layout shift, not the swap itself. size-adjust, ascent-override and descent-override let you shape the fallback font to the same metrics as the web font, so the swap barely moves a pixel. Tools can generate these overrides automatically for any Google Font.

The checklist

  1. WOFF2 only — every other format is legacy weight.
  2. Self-host — a second origin costs a DNS lookup, a TCP connection and a TLS handshake before byte one.
  3. Two families maximum, variable if possible.
  4. font-display: swap or optional, always.
  5. Metric-compatible fallbacks to kill the shift.

Fonts are pure texture — they carry no information your fallback can’t. Spend accordingly.

Leave a Comment