DEV Community

Rahil Khan
Rahil Khan

Posted on

Make text show up instantly: one CSS line most small-business sites miss

When your site loads custom fonts, Chrome often hides all text until the font file arrives. Visitors stare at a blank page for a second or two — and bounce.

Fix it with one line on your @font-face rule or Google Fonts link:

font-display: swap;
Enter fullscreen mode Exit fullscreen mode

Or on a Google Fonts URL, add &display=swap.

Text shows immediately in a system font, then swaps to your brand font when ready. Pair it with a similar fallback (system-ui, Arial, sans-serif) so the swap is barely noticeable.

This is a five-minute change that improves perceived speed on almost every small-business site we audit.


NEXCOD builds and polishes websites for local and online businesses.

Free look: nexcod.vercel.app · WhatsApp +1 289 902 5119

Top comments (0)