font-display and the Core Web Vitals
swap, auto, block, fallback, or optional across 15.0 million @font-face rules: how sites mix font-display rules on the same page and how that affects LCP and CLS.
Half of all 14,995,084 declared @font-face rules set font-display: swap (49.7%), while 39.6% leave it at auto. Most sites load more than one font stylesheet, so 62.2% of sites have at least one swap rule and 37.2% have at least one block rule. Sites that keep every font on swap or optional have a good LCP on 89% of sites, against 87% for blocking-only sites and 84% for sites that mix swap with block or auto.
Half of all 14,995,084 declared @font-face rules set font-display: swap (49.7%), while 39.6% leave it at auto. Most sites load more than one font stylesheet, so 62.2% of sites have at least one swap rule and 37.2% have at least one block rule. Sites that keep every font on swap or optional have a good CLS on 82% of sites, against 78% for blocking-only sites and 75% for sites that mix swap with block or auto.
Core Web Vitals pass rate
Here, a site counts under every font-display value present in its @font-face rules. Sites with at least one matching rule have a good LCP: optional at 89%, fallback at 88%, swap at 85%, auto at 85%, block at 82%. Why does swap (85%) sit right next to auto (85%)? Three in four sites that load Google Fonts with swap also load icon or theme fonts with block or auto. Those multi-font pages count under both values.
Here, a site counts under every font-display value present in its @font-face rules. Sites with at least one matching rule have a good CLS: fallback at 82%, swap at 77%, auto at 76%, optional at 75%, block at 75%. Why does swap (77%) sit right next to auto (76%)? Three in four sites that load Google Fonts with swap also load icon or theme fonts with block or auto. Those multi-font pages count under both values.
Font-display usage
Across 188,407 sites that declare web fonts, swap accounts for 49.7% of all @font-face rules, auto for 39.6%, block for 9.6%, fallback for 0.9%, and optional for 0.1%. At the site level, 46.4% of sites mix swap with blocking rules on the same page, 37.6% use only blocking rules (auto, block, or fallback), and 16.0% use swap or optional on every font rule.
Pass rate by site-wide font-display mix
When each site is counted once by its full rule mix, sites that keep every font on swap or optional have a good LCP on 89% of sites, against 87% for blocking-only sites and 84% for mixed sites. Mixed sites load a median of 5 font files across 44 @font-face rules (usually Google Fonts plus Font Awesome or theme icon fonts). Pure swap sites load a median of 4 font files across 18 rules.
When each site is counted once by its full rule mix, sites that keep every font on swap or optional have a good CLS on 82% of sites, against 78% for blocking-only sites and 75% for mixed sites. Mixed sites load a median of 5 font files across 44 @font-face rules (usually Google Fonts plus Font Awesome or theme icon fonts). Pure swap sites load a median of 4 font files across 18 rules.
font-display pass rate by number of font files
Comparing sites that load the same number of font files separates font-display from font count. With 1 to 2 font files, sites on pure swap have a good LCP on 90% of sites, against 87% for sites with any block rule. On pages loading 8 or more font files, pure swap reaches 83% against 76% for sites with block.
Comparing sites that load the same number of font files separates font-display from font count. With 1 to 2 font files, sites on pure swap have a good CLS on 82% of sites, against 79% for sites with any block rule. On pages loading 8 or more font files, pure swap reaches 80% against 71% for sites with block. At every font count, pure swap matches or beats block on field CLS.
| Downloaded font files | Only swap / optional | Auto or fallback (no block) | Includes font-display: block |
|---|---|---|---|
| 1 to 2 font files | 90%82% 8,094 sites | 89%80% 23,358 sites | 87%79% 9,033 sites |
| 3 to 4 font files | 91%84% 9,941 sites | 89%78% 28,814 sites | 85%77% 17,537 sites |
| 5 to 7 font files | 88%81% 7,457 sites | 88%77% 21,256 sites | 82%74% 23,151 sites |
| 8 or more font files | 83%80% 4,030 sites | 85%74% 11,370 sites | 76%71% 19,513 sites |
Understanding font-display
How font-display affects LCP and CLS during page load
When text is the LCP element, font-display: block and font-display: auto hide it for up to 3 seconds while the font file downloads. If the font arrives late, that wait delays LCP directly. With font-display: swap, the browser paints the fallback system font right away so LCP is recorded on first render, then swaps in the web font once it downloads. Swapping an unadjusted fallback font can shift text lines. Even so, pure swap sites match or beat blocking sites on field CLS at every font count (82% good CLS).
Set font-display: swap or font-display: optional on every @font-face rule, and check third-party icon stylesheets for leftover font-display: block rules. Across this dataset, 46.4% of sites mix rules on the same page because they load Google Fonts with display=swap alongside Font Awesome or theme icon fonts set to block or auto. At the same font file count, sites that keep every font on swap beat sites with any block rule by 3 to 7 percentage points on LCP. They do not lose a single point on CLS. Pair font-display: swap with size-adjust, ascent-override, and descent-override on body text fonts so the swap does not shift layout.
How font-display plays out per platform
What the field data shows when you isolate a single CMS or framework.
WordPress 64,760 sites WordPress sites with all fonts on swap pass LCP 10 points more often than mixed-rule sites.
Across WordPress, 48.8% of @font-face rules use swap and 50% use auto or block. Sites with every font on swap record a 1.5s median LCP (82% good LCP) compared with 1.9s (72% good LCP) on mixed-rule sites.
Shopify 8,466 stores 71.1% of Shopify @font-face rules use swap, while 27% use auto or block.
Shopify's Liquid font_face filter accepts a font_display parameter on generated @font-face rules. Across Shopify, pure-swap stores pass LCP at 98% (1.1s median) compared with 96% on mixed-rule stores.
React & Next.js 9,533 sites React sites with all fonts on swap pass LCP 21 points more often than mixed-font sites.
Across React sites, 71.3% of @font-face rules use swap. Sites with all fonts on swap pass LCP at 90% (1.2s median) compared with 69% (1.9s median) on mixed-rule sites.
By Arjen Karel · 210,902 crawled sites (69,745 with desktop Chrome field data, 188,407 sites with font-display, October 2026). How we measured.