The mistake: invisible text while fonts load

The mistake: invisible text while fonts load

You loaded a beautiful custom font, but now visitors stare at blank space for a second before any words appear. That delay hurts LCP — Largest Contentful Paint — because if your text is the biggest element, it can't paint until the font arrives.

Think of it like waiting for fancy stationery before writing a note, when plain paper would've let you start right away.

How to fix it:
— In your @font-face rule, add font-display: swap;.
— This shows a normal system font instantly, then swaps in your custom one.
— For your most important font, also add a <link rel="preload"> so it downloads sooner.

Text appears immediately, no awkward blank gap.

Try this: add font-display: swap to one font rule and reload. Your words show up right away now.