Web font loading: font-display, preload, unicode-range subsetting and metric-matched fallbacks

Goal

Text is visible on first paint, the brand font arrives without moving lines, and a page in one script downloads only the glyphs it uses.

Prerequisites

WOFF2 font files under a licence that permits subsetting, a subsetting tool (for example pyftsubset from fontTools), and control over response headers on the host that serves the fonts.

Steps

1. Split each face into per-script subsets (Latin, Latin Extended, Cyrillic, Greek, …) and declare each with its own @font-face and unicode-range. MDN states that if the page uses no character in a range the font is not downloaded, and if it uses at least one the whole file is.
2. Choose font-display per role using MDN's definitions: swap gives an extremely small block period and an infinite swap period (fallback shows at once, swaps whenever the font lands); fallback gives a short swap period; optional gives no swap period at all. Use optional for body text, where a late swap costs more than a missed font, and swap for headings and logos.
3. Preload only the files needed for first paint: <link rel="preload" as="font" type="font/woff2" href="…" crossorigin>. MDN notes font preloading requires the crossorigin attribute even for same-origin files, because fonts are fetched in CORS mode.
4. Declare a metric-matched fallback face: a second @font-face with src: local("Arial") (or another face present on the platform) and size-adjust, ascent-override, descent-override and line-gap-override tuned until a paragraph wraps on the same lines in both faces. List it after the web font in font-family.
5. Serve font files with a long Cache-Control: max-age plus immutable, and with CORS headers if they live on another origin.
6. Check with a throttled network profile: no invisible text, no line jump at swap, and a small number of font requests per page. Tighten subsets or move more text to optional if either fails.

Expected result

First paint shows text in the fallback or the cached web font, the swap (if any) barely moves lines, and a Latin-only page downloads one or two small files instead of the family.

Limits and test basis

Block and swap semantics follow the cited MDN definitions; the exact durations are browser-specific and not claimed. System font stacks (font-family: system-ui) avoid loading altogether, and variable fonts replace several static files with one; neither is compared here. No measurements are reported.