Web fonts missing font-display property — the fix

Web fonts are loaded without specifying the font-display CSS property. Without it, browsers may hide text until the font loads (Flash of Invisible Text), delaying content visibility.

Where this fits: performance in SEO

Performance is both a ranking signal (Core Web Vitals) and a conversion multiplier. Google measures real-user loading (LCP), interactivity (INP), and visual stability (CLS) — and slow sites lose visitors before analytics even registers them. Most performance issues concentrate in a few repeat offenders: unoptimised images, render-blocking resources, and third-party scripts. Fixing the top three usually moves the needle more than fixing the next thirty.

Why web fonts missing font-display property hurts your rankings

The default browser behavior for web fonts is to hide text until the font loads, which can result in invisible text for several seconds on slow connections. This directly impacts Largest Contentful Paint if the LCP element uses a web font. Lighthouse flags missing font-display as a performance issue.

This is a low-severity issue: a polish item. Fix it in batches during scheduled maintenance; the win is cumulative quality, not a step change.

How to fix it

Add font-display: swap (or optional) to your @font-face declarations. This tells the browser to show text immediately in a fallback font and swap to the web font once loaded.

@font-face {
  font-family: "Brand Font";
  src: url("/fonts/brand.woff2") format("woff2");
  font-display: swap;
}

Performance best practices

• Serve images in modern formats (WebP/AVIF), sized to their container, with explicit dimensions.
• Inline critical CSS and defer everything else; eliminate render-blocking third parties.
• Set far-future cache headers on static assets and an ETag on everything.
• Preload the fonts and hero image; font-display: swap to avoid invisible text.
• Measure with real-user Core Web Vitals, not just lab scores — Google ranks on field data.

The full library: SEO best practices, by category.

Frequently asked questions

Related performance guides

• Slow server response time (TTFB > 3s)
• Page size exceeds 3 MB
• Text resources not compressed
• Render-blocking CSS or JavaScript
• Image file too large (>500 KB)
• Excessive DOM size
• Excessive DOM nesting depth
• Excessive inline CSS