Font loading strategies
Eliminate layout shift and invisible text with a disciplined font loading pipeline.
1. Subset aggressively
Ship only the glyphs your pages actually use. A full Latin typeface weighs 80–200 KB; a hand‑subsetted woff2 for headlines and body copy often lands under 15 KB. Use glyphhanger or fonttools pyftsubset to strip unused ranges.
2. Preload the critical woff2
Place a <link rel="preload" as="font" crossorigin> in the document head. This kicks off the download before the CSS cascade resolves, cutting First Contentful Paint by hundreds of milliseconds on slow connections.
3. Use font-display: swap with a tuned fallback
font-display: swap shows system text immediately and replaces it once the custom font arrives. Pair it with size-adjust in the @font-face descriptor to match the fallback metrics, eliminating layout shift entirely.
4. Self-host everything
Avoid third‑party CDNs. Self‑hosted woff2 files share the same HTTP/2 connection as your HTML, skip extra DNS lookups, and keep you in control of caching headers. Serve them with a long max-age and immutable fingerprints.
Meridian tip: Run Lighthouse on a throttled 3G profile after each change. A cumulative layout shift score above 0.05 means your fallback metrics still need tuning.