font-display controls how text shows while a custom web font is still downloading. The value 'swap' shows text immediately in a fallback font, then swaps to the custom font when ready, preventing invisible text. Without font-display, browsers may hide text for up to three seconds (a Flash of Invisible Text), hurting perceived speed and Core Web Vitals.

'swap' is the safest default for body text: it eliminates invisible text by showing a fallback immediately. 'optional' is even faster for non-critical fonts because it may skip the custom font entirely on slow connections. Avoid leaving font-display unset, which defaults to 'auto' and usually behaves like 'block', hiding text.

Stylesheets that import fonts (including Google Fonts CSS) block rendering until they download, and the font files themselves can delay text painting. This tool flags external font stylesheets in the head and @font-face rules without font-display, since both are common causes of delayed or invisible text.

Add &display=swap to your Google Fonts URL, preconnect to fonts.gstatic.com, and consider self-hosting the font files to remove a third-party round trip. Google Fonts already serves with font-display when you add the display parameter, so check that your link includes it. This analyzer detects Google Fonts links so you can verify the setup.

Yes, through page experience. Slow or blocking font loads worsen Largest Contentful Paint (text is often the LCP element) and cause layout shifts when fallback and custom fonts have different metrics, hurting Cumulative Layout Shift. Both are Core Web Vitals that influence Google's ranking signals.

FOUT is when text appears first in a fallback font, then visibly changes when the custom font loads. It is the trade-off of font-display: swap. It is generally preferred over invisible text (FOIT) because users can read immediately. Pairing a well-matched fallback font with size-adjust descriptors minimizes the visual jump.

Add 'font-display: swap;' inside the @font-face rule: @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); font-display: swap; }. For Google Fonts, append &display=swap to the link URL. Re-run the analyzer to confirm the missing-font-display count drops to zero.