Web font uses font-display: block — the fix

One or more @font-face rules use font-display: block, which causes text to be invisible (FOIT — Flash of Invisible Text) while the font downloads.

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 font uses font-display: block hurts your rankings

font-display: block hides text for up to 3 seconds while the web font downloads. On slow connections, users see a blank page with no readable content, directly harming usability and Core Web Vitals (LCP). Using font-display: swap shows a fallback font immediately.

This is a medium-severity issue: individually modest, but it compounds — dozens of medium issues across hundreds of pages add up to a real quality deficit in how search engines assess the site.

How to fix it

Change font-display: block to font-display: swap (shows fallback immediately) or font-display: optional (only uses web font if cached). Preload critical fonts with <link rel='preload'>.

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.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