Web font uses font-display: block: what it is, why it matters, and how to fix it
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
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;
}Frequently asked questions
What does "Web font uses font-display: block" mean?
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.
Why does web font uses font-display: block matter for SEO?
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.
How do I fix web font uses font-display: block?
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'>.
How serious is this issue?
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. It belongs to the performance family of checks.
How do I find every page affected by this on my site?
Run a free Dr Urls audit: it crawls your site, detects web font uses font-display: block on every affected page, shows example URLs, and generates a ready-to-use fix task. Re-scan after fixing to verify the issue is gone.
Does your site have this issue?
A free Dr Urls audit crawls your site, finds every page affected by web font uses font-display: block, and hands you a ready-made fix task.
Check my site free