Why I use font-display: block, not swap

Every performance guide gives the same advice, and it isn't wrong so much as it's unconditional. On a site with one self-hosted, preloaded, subset typeface, swap trades an invisible win for a very visible layout shift — and Core Web Vitals bills you for the shift.

Fonts Core Web Vitals WPO

The advice everyone repeats

Lighthouse, every WPO checklist and Google's own documentation agree: use swap, so text is never invisible while the font loads.

What swap actually costs

The fallback font's metrics are not the webfont's metrics, so when the swap happens the text reflows. That reflow is a layout shift, and it lands in your CLS.

Why block wins on this site

block is only safe under conditions this site happens to meet: one typeface, self-hosted, subset to Latin, woff2, preloaded in the <head>. The font arrives in tens of milliseconds, so the invisible-text window swap exists to protect never opens — and nothing ever reflows.

When optional is the right call

optional gives a ~100ms block period and then, if the font hasn't arrived, simply doesn't use it for that page view. No swap, no shift, ever — at the cost of some visitors never seeing your typeface at all.

What to measure before copying this

The rule isn't "block beats swap". It's that swap is insurance against a slow font — and insurance you don't need is just a premium you're paying.

Related reading