Web fonts missing font-display property: what it is, why it matters, and how to fix it
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
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;
}Frequently asked questions
What does "Web fonts missing font-display property" mean?
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.
Why does web fonts missing font-display property matter for SEO?
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.
How do I fix web fonts missing font-display property?
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.
How serious is this 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. 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 fonts missing font-display property 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 fonts missing font-display property, and hands you a ready-made fix task.
Check my site free