WordPress font-display and the Core Web Vitals
swap, auto, block, fallback, or optional across 7.6 million @font-face rules: how sites mix font-display rules on the same page and how that affects LCP and CLS.
Across WordPress sites, 48.8% of all 7,601,463 declared @font-face rules set font-display: swap, while 42.2% leave it at auto. Most sites load more than one font stylesheet, so 65.3% of WordPress sites have at least one swap rule and 52.4% have at least one block rule. Sites that keep every font on swap or optional have a good LCP on 79% of sites, against 75% for blocking-only sites and 65% for sites that mix swap with block or auto.
Across WordPress sites, 48.8% of all 7,601,463 declared @font-face rules set font-display: swap, while 42.2% leave it at auto. Most sites load more than one font stylesheet, so 65.3% of WordPress sites have at least one swap rule and 52.4% have at least one block rule. Sites that keep every font on swap or optional have a good CLS on 90% of sites, against 91% for blocking-only sites and 87% 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: fallback at 72%, auto at 68%, swap at 68%, block at 65%. Why does swap (68%) sit right next to auto (68%)? 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 89%, swap at 88%, block at 87%. Why does swap (88%) sit right next to auto (89%)? 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 62,571 WordPress sites that declare web fonts, swap accounts for 48.8% of all @font-face rules, auto for 42.2%, block for 8.1%, fallback for 0.9%, and optional for 0.1%. At the site level, 54.7% of sites mix swap with blocking rules on the same page, 34.6% use only blocking rules (auto, block, or fallback), and 10.6% 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 79% of sites, against 75% for blocking-only sites and 65% for mixed sites. Mixed sites load a median of 6 font files across 78 @font-face rules (usually Google Fonts plus Font Awesome or theme icon fonts). Pure swap sites load a median of 5 font files across 32 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 91% for blocking-only sites and 87% for mixed sites. Mixed sites load a median of 6 font files across 78 @font-face rules (usually Google Fonts plus Font Awesome or theme icon fonts). Pure swap sites load a median of 5 font files across 32 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 83% of sites, against 76% for sites with any block rule. On pages loading 8 or more font files, pure swap reaches 73% against 58% 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 92% of sites, against 91% for sites with any block rule. On pages loading 8 or more font files, pure swap reaches 87% against 84% 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 | 83%92% 1,322 sites | 79%93% 5,312 sites | 76%91% 3,364 sites |
| 3 to 4 font files | 82%92% 1,812 sites | 77%91% 7,528 sites | 69%89% 7,452 sites |
| 5 to 7 font files | 77%90% 1,839 sites | 73%91% 6,178 sites | 65%88% 11,206 sites |
| 8 or more font files | 73%87% 1,552 sites | 68%87% 3,417 sites | 58%84% 10,502 sites |
Font-display per framework
On jQuery, 49% of declared @font-face rules use font-display: swap, 42% use auto, and 8% use block. 69% of jQuery sites have a good LCP. On Vue, 48% of rules use swap, 41% use auto, and 10% use block, and 68% of Vue sites have a good LCP.
On jQuery, 49% of declared @font-face rules use font-display: swap, 42% use auto, and 8% use block. 89% of jQuery sites have a good CLS. On Vue, 48% of rules use swap, 41% use auto, and 10% use block, and 89% of Vue sites have a good CLS.
Alpine 372 sitesblock 39%swap 36%auto (browser default) 24%80%90%
jQuery 59,841 sitesswap 49%auto (browser default) 42%69%89%
Vue 4,815 sitesswap 48%auto (browser default) 41%block 10%68%89%
React 2,225 sitesswap 49%auto (browser default) 39%block 11%61%85%font-display or the framework
Does the framework explain the font-display gap?
On jQuery, 78% of sites that keep every font on swap or optional have a good LCP, compared with 73% for blocking-only sites and 65% for jQuery sites that mix swap with blocking rules. Within jQuery, keeping every font on swap beats mixing rules by 13 percentage points. On Vue, 81% of sites that keep every font on swap or optional have a good LCP, compared with 68% for blocking-only sites and 65% for Vue sites that mix swap with blocking rules. Within Vue, keeping every font on swap beats mixing rules by 16 percentage points.
On jQuery, 90% of sites that keep every font on swap or optional have a good CLS, compared with 91% for blocking-only sites and 87% for jQuery sites that mix swap with blocking rules. Within jQuery, keeping every font on swap beats mixing rules by 3 percentage points. On Vue, 91% of sites that keep every font on swap or optional have a good CLS, compared with 92% for blocking-only sites and 87% for Vue sites that mix swap with blocking rules. Within Vue, keeping every font on swap beats mixing rules by 4 percentage points.
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).
Understanding font-display
Set font-display: swap or font-display: optional in theme.json (under settings.typography.fontFamilies[].fontFace[].fontDisplay) and replace icon fonts like Font Awesome or Dashicons with inline SVGs. On WordPress, 54.7% of sites mix rules on the same page because their body fonts use swap while page-builder or plugin icon stylesheets ship font-display: block or auto. At the same font file count, WordPress sites that keep every font on swap beat sites with any block rule by 7 to 15 percentage points on LCP and match or beat them on CLS.
By Arjen Karel · 63,295 crawled WordPress sites (60,855 with all devices Chrome field data, 62,571 sites with font-display, October 2026). How we measured.