WordPress font-display and the Core Web Vitals

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 77%, auto at 74%, swap at 74%, block at 72%. Why does swap (74%) sit right next to auto (74%)? 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 80%, auto at 77%, swap at 76%, block at 75%. Why does swap (76%) sit right next to auto (77%)? 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.

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.

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 82% of sites, against 80% for blocking-only sites and 72% 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 81% of sites, against 81% for blocking-only sites and 75% 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.

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 87% of sites, against 83% for sites with any block rule. On pages loading 8 or more font files, pure swap reaches 75% against 65% 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 81% of sites, against 78% 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.

On jQuery, 49% of declared @font-face rules use font-display: swap, 42% use auto, and 8% use block. 75% of jQuery sites have a good LCP. On Vue, 48% of rules use swap, 41% use auto, and 10% use block, and 75% 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. 77% of jQuery sites have a good CLS. On Vue, 48% of rules use swap, 41% use auto, and 10% use block, and 75% of Vue sites have a good CLS.

Framework@font-face rules on its sitesGood LCP

WordPress sites with font-display 62,571 sitesswap 49%auto (browser default) 42%76%

Alpine 372 sitesblock 39%swap 36%auto (browser default) 24%82%

jQuery 59,841 sitesswap 49%auto (browser default) 42%75%

Vue 4,815 sitesswap 48%auto (browser default) 41%block 10%75%

React 2,225 sitesswap 49%auto (browser default) 39%block 11%66%

auto (browser default) swap block fallback optional

Does the framework explain the font-display gap?

On jQuery, 81% of sites that keep every font on swap or optional have a good LCP, compared with 79% for blocking-only sites and 72% for jQuery sites that mix swap with blocking rules. Within jQuery, keeping every font on swap beats mixing rules by 9 percentage points. On Vue, 85% of sites that keep every font on swap or optional have a good LCP, compared with 77% for blocking-only sites and 71% for Vue sites that mix swap with blocking rules. Within Vue, keeping every font on swap beats mixing rules by 14 percentage points.

On jQuery, 81% of sites that keep every font on swap or optional have a good CLS, compared with 80% for blocking-only sites and 75% for jQuery sites that mix swap with blocking rules. Within jQuery, keeping every font on swap beats mixing rules by 6 percentage points. On Vue, 77% of sites that keep every font on swap or optional have a good CLS, compared with 81% for blocking-only sites and 71% for Vue sites that mix swap with blocking rules. Within Vue, pure swap and mixed sites have a good CLS about equally often.

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 (81% good CLS).