PERFORMANCE · SEO GLOSSARY
font-display
The CSS font-display descriptor controls how a web font loads and displays during the period before the font file has downloaded — choosing between invisible text (block period), fallback system font (swap period), or abandoning the web font load. font-display: swap is the standard recommendation for balancing visual stability and text visibility during font load.
Definition
When a browser encounters a web font (Google Fonts, self-hosted woff2 file, Adobe Fonts), it must download the font file before it can render text using that typeface. During the download period, browsers have historically hidden text ("Flash of Invisible Text" — FOIT) or shown fallback system font text that jumps when the web font loads ("Flash of Unstyled Text" — FOUT). The font-display CSS descriptor controls this behaviour: **font-display: block** — text is invisible during a "block period" (typically 3 seconds) while the font loads. If the font doesn\'t load in 3 seconds, fallback text appears. FOIT can be severe on slow connections — large blocks of invisible text don\'t count toward LCP until the font loads. **font-display: swap** — text renders immediately in a fallback system font. When the web font loads, it swaps in — causing FOUT. The text is always visible, and LCP can fire on the text content. However, the swap causes layout shift if the fallback and web font have different metrics (line height, character width) — contributing to CLS. This is the most common recommendation and is what Google Fonts uses by default. **font-display: fallback** — brief block period (100ms), then fallback. If the font loads within ~3 seconds, it swaps; otherwise the fallback stays for the page session. Good balance for fast connections. **font-display: optional** — very brief block period (100ms), then if the font isn\'t loaded, it uses the fallback permanently for this page view. Browsers may cancel the font download if it hasn\'t started by this point. Best for CLS-sensitive pages where font swap is unacceptable. **font-display: auto** — browser decides (typically mirrors "block" behaviour). **How to set font-display for Google Fonts**: add &display=swap to the Google Fonts URL parameter (most frameworks and generators do this automatically). For self-hosted fonts: add font-display: swap to the @font-face rule in CSS.
Why it matters for SEO
font-display choice directly affects two Core Web Vitals: LCP (font-display: block hides text content that might be the LCP element until the font loads, delaying LCP) and CLS (font-display: swap causes layout shift when the font swaps in if fallback and web font metrics differ significantly). Google\'s PageSpeed Insights and Lighthouse specifically flag "Ensure text remains visible during webfont load" as a performance improvement — this refers to adding font-display: swap or similar to prevent FOIT.
How DeepSEOAnalysis checks this
The audit detects Google Fonts URLs in the page HTML and checks whether &display=swap is present. For self-hosted font @font-face declarations detectable in linked stylesheets, font-display is validated. Absence of font-display: swap on pages using web fonts is flagged as a performance and CLS risk.
Useful tools and resources
GLOSSARY
Related terms
performance
Core Web Vitals
Three Google metrics — LCP, INP, and CLS — that measure real-user loading, interactivity, and visual stability.
Read definition →core web vitals
Cumulative Layout Shift (CLS)
The Core Web Vital measuring visual stability — the total unexpected layout movement of visible elements during page load. Good CLS is ≤0.1 at p75; poor CLS indicates elements shifting position after the user begins reading.
Read definition →core web vitals
Largest Contentful Paint (LCP)
The Core Web Vital measuring how long it takes for the largest visible content element in the viewport to render — good LCP is under 2.5 seconds at the p75 threshold using real Chrome user data (CrUX).
Read definition →performance
Preconnect
Preconnect is an HTML resource hint (<link rel="preconnect" href="...">) that instructs the browser to establish a connection (DNS lookup, TCP handshake, TLS negotiation) to a third-party domain before it is actually needed — reducing latency when a resource from that domain is requested during page load.
Read definition →performance
Page Speed
The time it takes for a page to load and become usable — measured by multiple metrics including TTFB, FCP, and Core Web Vitals.
Read definition →See how your site scores on font-display.
The free DeepSEOAnalysis audit checks font-display and 100+ other signals. Full report, no signup.
Run a free audit →