Typography defines brand character and reading comfort, but custom web fonts are heavy network assets. Improper loading creates two notorious issues: Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT).
Host Fonts Locally for Zero Third-Party Latency
Relying on third-party font hosting introduces unnecessary DNS lookups, TCP handshakes, and external network delays. Downloading modern font files and hosting them directly on your server or CDN eliminates cross-origin latency and guarantees uptime.
Convert all font files to the `WOFF2` format, which offers superior Brotli compression compared to older `TTF` or `EOT` files. Ensure your web server serves `WOFF2` files with long-term immutable caching headers: `Cache-Control: public, max-age=31536000, immutable`.
Preload Critical Headline Fonts and Subset Glyphs
You can instruct the browser to begin downloading critical fonts immediately using link preloads in the document `<head>`: `<link rel="preload" href="/fonts/outfit-bold.woff2" as="font" type="font/woff2" crossorigin>`. Furthermore, use font subsetting tools to strip unused character sets, reducing file sizes from 120KB down to 15KB per weight.
Performance investigation checklist
- Measure the page on a representative device and connection before changing code.
- Identify whether delays come from server response, scripts, fonts, images, layout, or third-party services.
- Resize media, reserve layout space, and defer non-critical resources.
- Remove unused dependencies only after confirming required features still work.
- Retest after each meaningful change under similar conditions.
Avoid optimisation by guesswork
Lab scores help diagnose problems but do not represent every visitor. Review field data where available and protect correctness, accessibility, and reliability while improving speed.