How to Use font-display: swap for Web Fonts

What is this?

When a browser loads a custom web font, it may hide text until the font is downloaded (Flash of Invisible Text, or FOIT). The font-display: swap CSS property tells the browser to show text immediately using a fallback font, then swap in the custom font once it loads.

Why it matters

• Performance: Eliminates invisible text during font loading, improving FCP
• User experience: Users can read content immediately instead of seeing blank text
• Core Web Vitals: Directly impacts First Contentful Paint (FCP) and Largest Contentful Paint (LCP)

How to fix it

Google Fonts

Add &display=swap to your Google Fonts URL:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Self-hosted fonts with @font-face

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2'),
       url('/fonts/custom.woff') format('woff');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

Preload critical fonts

Combine font-display: swap with font preloading for the best experience:

<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin>

Tailwind CSS

Tailwind uses system fonts by default. If you added custom fonts, ensure your @font-face rules include font-display: swap.

Common mistakes

• Using font-display: block which hides text for up to 3 seconds. Use swap or optional instead.
• Preloading too many font files. Only preload the font weights used above the fold.
• Not specifying crossorigin on font preload links. Fonts always require CORS, even from the same origin.

Test your fix

After adding font-display: swap, audit your site on BeaverCheck to verify in the Performance tab.