Are web fonts ruining your lighthouse score?

Web fonts can make a site look sleek, but they often come with a hidden performance cost. If your page layout jumps while loading or your main heading takes seconds to appear, your custom typography strategy might be the culprit.

Slow-loading fonts directly impact two key Core Web Vitals :

• LCP (Largest Contentful Paint): When render-blocking fonts delay text rendering.
• CLS (Cumulative Layout Shift): When unstyled fallback fonts suddenly swap into custom fonts, causing layout shifts.

FOUT vs FOIT: A design & UX trade-off

Handling web fonts often comes down to choosing between two rendering behaviors :

FOIT (Flash of invisible text) : The browser hides the text until the custom font loads. It maintains brand consistency and prevents layout jumps, but risks leaving users staring at blank spaces on slow networks.

FOUT (Flash of Unstyled Text) : The browser shows a system fallback font immediately and swaps it once the custom font is ready. It prioritizes instant readability, but can cause layout shifts.

The strategic choice with font-display

You can control this behavior in CSS using the font-display property depending on your priorities :

`

css
CSS
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom-font.woff2') format('woff2');
/* Use 'swap' for instant readability (FOUT),
or 'block' to preserve visual identity first (FOIT) */
font-display: swap;
}

`

**1. font-display: swap (FOUT): Best for performance and readability. Text appears instantly using a fallback font.

2. font-display: block (FOIT): Best for strict design integrity. Briefly hides text (up to 3s) to prevent a sudden font swap.
4. font-display: optional: A balanced approach that lets the browser skip the custom font if the connection is too slow, avoiding layout shifts entirely.**

I wrote a complete step-by-step guide covering all these optimization techniques on my blog:

👉 Read the full guide to web font optimization here