PERFORMANCE · SEO GLOSSARY
font-display (SEO)
The CSS `font-display` descriptor that controls how a browser handles text rendering while a web font is loading — affecting both the Cumulative Layout Shift (CLS) metric (from font swap reflow) and the First Contentful Paint (FCP) timing (from invisible text during font loading).
Definition
The CSS `font-display` property within `@font-face` rules controls the browser\'s text rendering strategy during the period between page load and web font download completion. Without font-display, browsers typically show invisible text (Flash of Invisible Text — FOIT) while the web font downloads, delaying when users see any text content. font-display values and their SEO implications: (1) **`font-display: swap`** — shows fallback font immediately (Flash of Unstyled Text — FOUT), switches to web font when loaded. Most SEO-friendly: text is visible immediately (good for FCP); may cause CLS if the fallback font has different metrics (size, line height) than the web font. (2) **`font-display: optional`** — shows fallback font; only swaps to web font if it loads within a very short window (typically 100ms). If the font doesn\'t load within the window, the fallback is used for the entire page session. Best for CLS (no swap after the brief window) but the web font may frequently not display. (3) **`font-display: block`** — invisible text for up to 3 seconds (block period), then fallback. Provides a short window for the font to load before showing fallback. Can harm FCP if the web font takes >3 seconds to load. (4) **`font-display: fallback`** — invisible text for ~100ms, then fallback until the font loads; swaps if the font loads within ~3 seconds. (5) **`font-display: auto`** — browser default; typically similar to block. Google Fonts default: when using `@import` or `<link>` for Google Fonts, `font-display: swap` is available by appending `&display=swap` to the Google Fonts URL. Google recommends `display=swap` for Google Fonts users. CLS from font swap: if the web font has significantly different size or metrics from the fallback font, the text reflow when the font loads causes CLS. CSS size-adjust descriptor (relatively new) allows adjusting the fallback font metrics to match the web font, minimising reflow.
Why it matters for SEO
Web fonts are a common cause of both FCP delays (FOIT from default or block font-display) and CLS (from font metric differences between fallback and web font). Correct font-display configuration — `swap` for most use cases, combined with preload for critical fonts — reduces both FCP and CLS issues. Since both FCP and CLS are Core Web Vitals related signals, font-display optimisation has direct ranking implications for pages using web fonts.
How DeepSEOAnalysis checks this
DeepSEOAnalysis checks font-display usage on audited pages: identifying web fonts loaded without `font-display: swap` or equivalent, and checking whether a `<link rel="preload">` exists for critical web fonts. CrUX CLS data at p75 reflects real-world layout shift, which may be partially caused by font-swap reflow if font metrics are significantly different from fallback fonts.
GLOSSARY
Related terms
performance
Render-Blocking Resources (SEO)
CSS stylesheets and JavaScript files that block the browser from rendering page content until they are downloaded and processed — a primary cause of poor LCP and FCP (First Contentful Paint) scores, requiring deferral, async loading, or inline critical CSS strategies to resolve.
Read definition →performance
LCP Image
The image element identified by Chrome as the Largest Contentful Paint (LCP) candidate on a page — the largest visible image in the initial viewport that determines the LCP timing score, typically the hero image, product thumbnail, or featured photo at the top of the page.
Read definition →performance
Preconnect (SEO)
The `<link rel="preconnect">` resource hint that instructs the browser to establish a TCP+TLS connection to a specified origin in advance of it being needed — reducing latency for third-party resources (fonts, CDN assets, analytics) that would otherwise wait for connection establishment when first requested.
Read definition →performance
Resource Hints
HTML link elements that instruct browsers to prefetch, preconnect, preload, or prerender resources — used to improve page loading performance by initiating connections and resource downloads earlier than they would otherwise begin, reducing the impact of network latency on LCP and other Core Web Vitals.
Read definition →performance
Performance Budget
A predefined set of constraints on web page performance metrics — such as maximum JavaScript bundle size, maximum LCP time, or maximum total blocking time — used to prevent performance regression as a website evolves, by alerting or failing builds when the page\'s performance metrics would exceed the defined thresholds.
Read definition →See how your site scores on font-display (SEO).
The free DeepSEOAnalysis audit checks font-display (seo) and 100+ other signals. Full report, no signup.
Run a free audit →