--- title: "Font Loading Checker — Free FOIT, Swap & Preload Audit" description: "Free font loading checker. Find missing font-display, FOIT, oversized woff2 files, and missing preload hints — the top web-font performance issues." canonical: "https://lemwatch.com/tools/font-loading-checker" source: "https://lemwatch.com" --- # Font Loading Checker > 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 `` 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. ## What this tool checks - Missing `font-display: swap` (causes FOIT — invisible text) - Web fonts not preloaded - Oversized font files (>50KB compressed) - Too many font weights/styles loaded - Self-hosted vs third-party font hosting - Variable fonts opportunity ## Why it matters 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. ## How to fix what it finds - Add `font-display: swap` to every `@font-face` rule - Preload critical fonts with `` - Self-host fonts to remove third-party DNS and TLS handshakes - Subset fonts to only the characters you actually use - Use variable fonts to replace 4–8 file requests with 1 ## Methodology 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. ## Frequently asked questions ### What's the difference between FOIT and FOUT? 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. ### Should I use Google Fonts or self-host? 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. ### Do I need to preload every font? No — only the ones used above the fold. Preloading every font wastes bandwidth on body fonts the user might never scroll to. ### What's a variable font? 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. ### Why does CLS care about fonts? 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. ## Related - [All free tools](https://lemwatch.com/tools) - [core web vitals checker](https://lemwatch.com/tools/core-web-vitals-checker) - [Third Party Scripts Checker](https://lemwatch.com/tools/third-party-scripts-checker) - [Image Optimization Checker](https://lemwatch.com/tools/image-optimization-checker) - [Broken Link Checker](https://lemwatch.com/tools/broken-link-checker) - [Lemwatch pricing](https://lemwatch.com/pricing) - [All monitoring checks](https://lemwatch.com/features) - [Free SEO Audit](https://lemwatch.com/tools/free-seo-audit)