Sift
🔍

Fix Lighthouse Font Warnings

Step-by-step fixes for font-related Lighthouse audits. Pass every font performance check and improve your Core Web Vitals.

7 min read · Last updated January 2025

Quick Answer

To fix "Ensure text remains visible during webfont load": Add font-display: swap to your @font-face rules. For Google Fonts, add &display=swap to the URL. This one-line fix typically improves LCP by 100-300ms.

Common Font-Related Lighthouse Audits

Lighthouse flags several font-related issues that impact Core Web Vitals. Here are the most common audits and their impact:

Ensure text remains visible during webfont load

Warning

Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

Impacts: LCP, CLS

Preload key requests

Opportunity

Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.

Impacts: LCP

Reduce unused CSS

Opportunity

Reduce unused rules from stylesheets and defer CSS not used for above-the-fold content.

Impacts: FCP, LCP

Eliminate render-blocking resources

Opportunity

Resources are blocking the first paint of your page. Consider delivering critical CSS inline and deferring non-critical CSS.

Impacts: FCP, LCP

Fix #1: "Ensure text remains visible during webfont load"

This is the most common font warning. It means text is invisible while fonts load (FOIT - Flash of Invisible Text).

For Self-Hosted Fonts

Add font-display: swap to every @font-face rule:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;  /* Add this line */
}

For Google Fonts

Add &display=swap to the Google Fonts URL:

<!-- Before -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700" rel="stylesheet">

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

What font-display: swap does

Shows fallback text immediately, then swaps to the custom font when loaded. Users see content instantly instead of blank space. The brief visual change (FOUT) is better than invisible text.

Fix #2: Preload Key Fonts

Preloading tells the browser to fetch critical fonts early, before it discovers them in CSS. Add to your <head>:

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

Do Preload

  • • Primary heading font
  • • Body text font (if custom)
  • • Fonts used above-the-fold
  • • Maximum 1-2 fonts

Don't Preload

  • • Icon fonts (use SVG instead)
  • • Below-the-fold fonts
  • • All font weights
  • • More than 2-3 fonts total
Warning: Preloading too many fonts wastes bandwidth and can hurt performance. Only preload fonts that are critical for first render.

Fix #3: Reduce Font File Size

Large font files trigger "Reduce unused CSS" and slow down LCP. Here's how to minimize file size:

1. Use WOFF2 Format

WOFF2 is 30% smaller than WOFF and has 98%+ browser support. Always convert to WOFF2.

2. Subset to Used Characters

Most sites only need Latin characters. Subsetting removes unused glyphs, reducing file size by 70-90%.

3. Limit Font Weights

Each weight is a separate file. Most sites need only 2-3 weights (regular, medium, bold).

4. Consider Variable Fonts

One variable font file can replace multiple weight files. Often smaller total size for 3+ weights.

Optimize Fonts Instantly

Sift converts, subsets, and optimizes fonts in one step — all in your browser.

Try Sift Free

Fix #4: Eliminate Render-Blocking Font CSS

External CSS files that include @font-face rules block rendering. Here's how to fix it:

Option A: Inline Critical Font CSS

Move @font-face rules directly into your HTML <head>:

<head>
  <style>
    @font-face {
      font-family: 'Inter';
      src: url('/fonts/inter.woff2') format('woff2');
      font-display: swap;
    }
  </style>
</head>

Option B: Preconnect to Font Origins

If using Google Fonts or other CDNs, add preconnect hints:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Option C: Load Fonts Asynchronously

Use the media="print" trick to load font CSS without blocking:

<link
  rel="stylesheet"
  href="/fonts.css"
  media="print"
  onload="this.media='all'"
>
<noscript>
  <link rel="stylesheet" href="/fonts.css">
</noscript>

Verify Your Fixes

After implementing fixes, verify they work:

1. Run Lighthouse Again

Open Chrome DevTools → Lighthouse tab → Generate report. Font warnings should be resolved.

2. Check Network Tab

Filter by "Font" to see file sizes and load times. WOFF2 files should be under 50KB each.

3. Test on PageSpeed Insights

Use PageSpeed Insights for real-world data from Chrome User Experience Report.

4. Visual Inspection

Slow down network in DevTools (3G) and reload. Text should be visible immediately with fallback font.

Quick Checklist

  • ☐ Add font-display: swap to all @font-face rules
  • ☐ Preload 1-2 critical fonts
  • ☐ Convert fonts to WOFF2 format
  • ☐ Subset fonts to required characters
  • ☐ Limit to 2-3 font weights
  • ☐ Add preconnect hints for external fonts
  • ☐ Inline critical font CSS or load async

Related Guides

font-display: swap Explained

Deep dive into font-display values

 Preloading Fonts

When and how to preload

 Core Web Vitals & Fonts

How fonts affect LCP and CLS

 Font Loading Strategies

FOIT vs FOUT approaches

Fix Font Warnings Automatically

Sift optimizes fonts for Lighthouse automatically — WOFF2 conversion, subsetting, and proper CSS generation in one step.

Try Sift Free