Audit how your web fonts load. Find FOIT, missing `font-display: swap`, and oversized font files dragging down LCP and CLS.
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.
A blocked web font shows nothing — your text is invisible until the font downloads, blowing LCP. The wrong fallback metrics cause text to reflow when the font swaps in, blowing CLS. Both are ranking signals.
We fetch the page, parse every stylesheet for `@font-face` declarations, and inspect the resulting font requests in the network waterfall. Each font is evaluated against six criteria: `font-display` set, preload hint present, file size (woff2 compressed), self-hosted vs third-party, number of weights/styles loaded, and whether a variable-font alternative exists. We surface the byte savings from migrating to variable fonts and from subsetting against the characters your visible text actually uses. The test runs against a real Chromium so we see exactly which fonts the browser actually requested.
FOIT (Flash of Invisible Text) hides text until the font loads — bad for LCP. FOUT (Flash of Unstyled Text) shows text immediately in the fallback font, then swaps when the web font arrives — slightly jarring but almost always the better tradeoff.
Self-host for performance, privacy, and reliability. The extra DNS+TLS handshake on Google Fonts adds 100–300ms and triggers GDPR concerns in the EU. Download the woff2 files once and serve from your own domain.
No — only the ones used above the fold. Preloading every font wastes bandwidth on body fonts the user might never scroll to.
A single font file that contains a continuous weight (and sometimes width/slant) axis. One variable Inter file replaces 8+ static weight files at smaller total size.
When the web font replaces the fallback, the text reflows because the metrics differ. Use the `size-adjust` and `ascent-override` `@font-face` descriptors to match the fallback to the web font and eliminate the shift.