Ensure text remains visible during webfont load (FOIT)

What’s actually happening

For a moment after the page opens there's no body text at all — just blank space where the words should be — then everything pops in once the font arrives. That blank window is the flash of invisible text (FOIT). On a slow or flaky connection it can last seconds, and the default browser timeout is about 3s before it gives up and shows a fallback. It pushes out First Contentful Paint because the text technically isn't painted yet.

Common causes

• @font-face rules with no font-display descriptor, which defaults to a block period that hides text
• Self-hosted fonts loaded late in the CSS, with no preload, so they're discovered slowly
• A font provider snippet (older Google Fonts embeds, Typekit) that doesn't include &display=swap
• Render-blocking font CSS that the browser must fetch and parse before it knows which font to wait on
• Too many font weights/styles requested, so the critical one queues behind the rest

How to fix it

1. Add font-display: swap to every @font-facefont-display: swap tells the browser to show the fallback font immediately and swap in the custom font when it loads. Text is readable from the first paint. Add &display=swap to Google Fonts URLs, or set the descriptor directly in your self-hosted @font-face block.
2. Preload the one or two fonts that matter<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> for the weights used above the fold. The browser starts the download early instead of waiting to parse the CSS, which shrinks both the FOIT and the later font-swap reflow.
3. Ship woff2 and trim the weights you don't usewoff2 is the smallest format and is supported everywhere that matters. Serve only the weights and styles the page actually renders — every extra file competes for bandwidth with the one you need first.
4. Reduce the swap reflow with a matched fallbackswap can cause a visible jump when the real font is wider/taller than the fallback. Use size-adjust, ascent-override, and a close system-font stack (or a tool like Fontaine) so the swap barely moves the layout — that also keeps CLS down.