Font Loading Checker

Web fonts are a brand requirement and a performance hazard. This checker audits exactly how your fonts load, where the blocking moments are, and which one-line CSS changes return the most milliseconds.

FOIT vs FOUT — pick the right tradeoff

Without font-display: swap, browsers default to FOIT (Flash of Invisible Text) — text is hidden until the font downloads. On a slow connection that's 3+ seconds of nothing visible, which torches LCP and bounce rate. font-display: swap switches to FOUT (Flash of Unstyled Text) — text renders immediately in the fallback font, then re-renders when the real font arrives. FOUT looks janky but is almost always the right choice.

Preload the fonts above the fold

Browsers discover web fonts late — they have to parse the CSS, find the @font-face rule, and then start the font download. A <link rel="preload" as="font" type="font/woff2" crossorigin> in the document head starts the download immediately, often shaving 500–1500ms off the moment your hero text is readable. The crossorigin attribute is mandatory; without it the browser ignores the preload.

Self-host or third-party — the case for self-hosting

Google Fonts and Adobe Typekit save you the hassle of font hosting but add a DNS lookup, TLS handshake, and a third-party privacy concern (GDPR rulings have gone against Google Fonts in Germany). Self-hosting eliminates the extra connection and gives you control over caching headers. For most teams, downloading the woff2 files once and serving them from your own domain is a clean win.

Variable fonts collapse the request count

If you use a typeface in regular, medium, semibold, bold, and their italics, that's 8 file requests. A single variable font file delivers the entire weight axis in one woff2, often smaller than 2 static weights combined. Inter, Roboto Flex, and JetBrains Mono all ship variable versions; the migration is usually a single CSS change.

Match the fallback metrics

When the web font swaps in, the layout shifts because the metrics differ from the fallback. The size-adjust, ascent-override, descent-override, and line-gap-override @font-face descriptors let you tune the fallback to match — turning a CLS-blowing swap into one the user barely notices. The font-fallback-generator at fontkit.dev produces these values automatically.