font-display and the Core Web Vitals
swap, auto, block, fallback, or optional across 15.1 million @font-face rules: how sites mix font-display rules on the same page and how that affects LCP and CLS.
Half of all 15,091,530 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.3% 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 87% of sites, against 85% for blocking-only sites and 78% for sites that mix swap with block or auto.
Half of all 15,091,530 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.3% 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 90% of sites, against 89% for blocking-only sites and 86% 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 86%, fallback at 83%, auto at 81%, swap at 80%, block at 76%. Why does swap (80%) sit right next to auto (81%)? 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 91%, auto at 87%, swap at 87%, block at 86%, optional at 83%. Why does swap (87%) sit right next to auto (87%)? 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 189,724 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 87% of sites, against 85% for blocking-only sites and 78% 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 90% of sites, against 89% for blocking-only sites and 86% 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 89% of sites, against 83% for sites with any block rule. On pages loading 8 or more font files, pure swap reaches 83% against 69% 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 90% of sites, against 89% for sites with any block rule. On pages loading 8 or more font files, pure swap reaches 89% against 83% 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 | 89%90% 8,166 sites | 88%89% 23,507 sites | 83%89% 9,109 sites |
| 3 to 4 font files | 88%90% 10,013 sites | 87%88% 29,012 sites | 79%88% 17,630 sites |
| 5 to 7 font files | 86%91% 7,512 sites | 84%88% 21,422 sites | 76%87% 23,327 sites |
| 8 or more font files | 83%89% 4,054 sites | 80%85% 11,439 sites | 69%83% 19,659 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 (90% 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 6 to 14 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 65,181 sites WordPress sites with all fonts on swap pass LCP 14 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.7s median LCP (79% good LCP) compared with 2.1s (65% good LCP) on mixed-rule sites.
Shopify 8,527 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.2s median) compared with 95% on mixed-rule stores.
React & Next.js 9,621 sites React sites with all fonts on swap pass LCP 23 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 94% (1.2s median) compared with 71% (1.9s median) on mixed-rule sites.
By Arjen Karel · 212,308 crawled sites (197,524 with all devices Chrome field data, 189,724 sites with font-display, October 2026). How we measured.