The State of Web Vitals

font-display strategy

The font-display strategy on declared fonts: swap, block, optional, fallback, auto.

Field data PhoneDesktopAll Scope All sites Q1 2026 edition · All devices field outcomes
Metric LCP INP CLS
1

At a glance the headline numbers for font-display strategy

The font-display strategy on declared fonts: swap, block, optional, fallback, auto.

5
Categories
In the distribution
49.5%
Fleet share
Top: swap
57.7%
Sites with any
Of swap

49.5% of fonts use font-display swap. 9.4% still hide their text while loading.

The State of Web Vitals · Q1 2026 · 94,910 sites · all devices field datacorewebvitals.io/state-of-cwv
2

The font-display strategy mix who uses what, and how stable each group is

Median CLS (sites using feature)
0
0.10
0.20
0.30
0.40
0.50
Swap0.0050% of sites
Auto0.0040% of sites
Block0.019% of sites
Fallback0.001% of sites
Optional0.010% of sites
VariantShare of sitesMedian
Swap
50%
0.00
Auto
40%
0.00
Block
9%
0.01
Fallback
1%
0.00
Optional
0%
0.01

font-display strategy. On the fleet: 49.5% swap, 40.0% auto, 9.4% block. 57.7% of sites use at least one swap.

Lowest-share bucket: CLS 0.00. Highest-share bucket: CLS 0.00. r = +0.28.

The State of Web Vitals · Q1 2026 · 94,910 sites · all devices field datacorewebvitals.io/state-of-cwv
3

Passing CLS per bucket every category and count level at once - color is the pass rate

1
2
3
4
5
6
7
8
9
10
11
12
Swap 49.5%
89
87
89
89
89
88
88
86
86
85
85
84
Auto 40%
90
89
86
87
86
86
86
86
87
84
86
86
Block 9.4%
89
87
89
86
85
84
81
77
81
73
87
86
Fallback 1%
88
90
87
91
91
93
94
92
94
93
89
Optional 0.1%
88
88
92
73
84
88
85
81
← few of this category on the pagemany →
60%95%+ of sites passing CLS Faded cells: under 100 sites

Each row is a category, each column its own count bucket (few on the left, many on the right); the cell is the share of those sites passing CLS.

Swap swings the hardest: 89% of sites pass CLS with few, 84% with many. computed

The State of Web Vitals · Q1 2026 · 94,910 sites · all devices field datacorewebvitals.io/state-of-cwv
4

Few vs many - does quantity cost CLS? the pass rate with few vs many of each category

60%70%80%90%100% few → many
Swap 49.5% 89% → 84%
Auto 40% 90% → 86%
Block 9.4% 89% → 86%
Fallback 1% 88% → 93%
% of sites passing CLS · hollow ring = pages with few, solid dot = pages with many

Per category: the pass rate among pages with FEW of it (hollow ring) against pages with MANY (solid dot), worst trend first. Thin buckets are excluded from the endpoints.

More Swap costs the most: the CLS pass rate falls from 89% with few to 84% with many. computed

The State of Web Vitals · Q1 2026 · 94,910 sites · all devices field datacorewebvitals.io/state-of-cwv
5

Why this matters for the Core Web Vitals, and where to start fixing it

font-display decides what text does while the web font downloads. block hides it: invisible text, and a direct LCP delay when the LCP element is text. swap shows the fallback font immediately and switches when the web font lands, and that switch reflows the page (CLS) when the two fonts have different metrics. optional shows the fallback and only uses the web font if it arrives fast, which is the safest setting for the vitals.

The CLS half of swap is fixable without giving up the font: tune the fallback with size-adjust and the override descriptors so the swap barely moves anything.

How does this affect the Core Web Vitals?

Of the 5 categories, Block separates passing sites from failing sites the most. Where Block is rare: 86% pass the LCP. Where it is common: 76%.

Go fix it Keep text visible during font load → Responsive font loading strategy → Self-host Google Fonts →
Related signals Stylesheet origin (1P/3P) → CSS coverage (used vs unused) → Image format mix → Fonts per page → Chrome field data from 94,910 sites, representing millions of real page loads · How we measured