Should I preload all my fonts?

No. Only preload 1-2 critical fonts used above the fold. Preloading too many fonts wastes bandwidth and can actually hurt performance by competing with other critical resources.

What's the correct preload syntax for fonts?

Use: . The crossorigin attribute is required even for same-origin fonts, and type="font/woff2" helps browsers skip unsupported formats.

Does font preloading improve Core Web Vitals?

When used correctly, preloading critical fonts can improve LCP by ensuring text renders faster. However, excessive preloading can hurt performance by delaying other critical resources.

Preloading Fonts: When and How to Use link rel="preload"

What is Font Preloading?

Font preloading tells the browser to fetch a font file before it discovers it needs the font through CSS parsing. Normally, browsers follow this sequence:

Download HTML
Parse HTML, discover CSS
Download CSS
Parse CSS, discover @font-face
Start font download (late!)

With preloading, the browser starts downloading the font in step 2, saving valuable time:

Without preload: HTML → CSS → Parse CSS → Font download starts
With preload: HTML → Font download starts immediately

When to Preload Fonts

Preloading is beneficial in these specific situations:

1. Above-the-fold text fonts

If a font renders your main headline or body text visible in the initial viewport, preload it. This directly improves LCP.

2. Fonts loaded via CSS @import

If your CSS imports another stylesheet that contains @font-face rules (common with CSS frameworks), preloading bypasses the extra round trip.

3. Fonts on slow connections

On slow 3G connections, font discovery delay can add 1-2 seconds to text rendering. Preloading eliminates this delay.

When NOT to Preload Fonts

Preloading isn't free — it competes with other critical resources. Avoid preloading in these cases:

❌ More than 2 fonts

Preloading many fonts saturates bandwidth and delays other critical resources. Stick to 1-2 fonts maximum.

❌ Below-the-fold fonts

Fonts that only appear when the user scrolls don't need preloading. Let them load naturally.

❌ Icon fonts

Icon fonts are rarely critical path. Consider SVG icons instead, or let icon fonts load normally.

❌ Google Fonts via CSS link

If you're using Google Fonts' CSS URL, preloading the CSS file (not fonts) is usually more effective. Better yet, self-host.

The Correct Preload Syntax

Here's the complete, correct syntax for font preloading:

<!-- In your <head> -->
<link rel="preload"
      href="/fonts/inter-var.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

<!-- For multiple weights, preload each file -->
<link rel="preload"
      href="/fonts/inter-400.woff2"
      as="font"
      type="font/woff2"
      crossorigin>

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

Required Attributes Explained

as="font"

Tells the browser this is a font resource, enabling correct prioritization.

type="font/woff2"

Allows browsers to skip the preload if they don't support WOFF2 (rare today).

crossorigin

Required even for same-origin fonts. Without it, the browser downloads the font twice.

Common Mistakes

1. Missing crossorigin attribute

<!-- ❌ Wrong: Missing crossorigin -->
<link rel="preload" href="/fonts/font.woff2" as="font">

<!-- ✅ Correct: Include crossorigin -->
<link rel="preload" href="/fonts/font.woff2" as="font" crossorigin>

Without crossorigin, the preloaded font won't match the CSS request, causing a double download.

2. Preloading fonts you don't use

Chrome DevTools will warn: "The resource was preloaded using link preload but not used within a few seconds."

Only preload fonts that are actually used on the current page, not fonts for other pages.

3. Preloading non-WOFF2 formats

<!-- ❌ Wasteful: Preloading legacy formats -->
<link rel="preload" href="/fonts/font.woff" as="font">
<link rel="preload" href="/fonts/font.ttf" as="font">

<!-- ✅ Efficient: Only WOFF2 -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>

WOFF2 has 98%+ browser support. Only preload WOFF2.

4. URL mismatch between preload and @font-face

<!-- ❌ URLs don't match -->
<link rel="preload" href="/fonts/Inter.woff2" ...>

@font-face { src: url('/assets/fonts/Inter.woff2'); /* Different path! */ }

The preload href must exactly match the URL in your @font-face src.

Measuring the Impact

To verify preloading is working:

Chrome DevTools Network Tab

Open DevTools → Network tab
Filter by "Font"
Reload the page
Check the "Initiator" column — it should show "preload" or "(index)"
Verify fonts load early in the waterfall

WebPageTest

Run a test at webpagetest.org and examine the waterfall chart. Preloaded fonts should start downloading within the first few requests, not after CSS parsing.

Lighthouse

Check the "Avoid chaining critical requests" audit. Properly preloaded fonts won't appear in the critical chain.

Complete Example

<!DOCTYPE html>
<html>
<head>
  <!-- Preload critical font FIRST -->
  <link rel="preload"
        href="/fonts/inter-var.woff2"
        as="font"
        type="font/woff2"
        crossorigin>

  <!-- Then your CSS -->
  <link rel="stylesheet" href="/styles.css">
</head>
<body>
  <h1>This text renders with Inter immediately</h1>
</body>
</html>

Key: Place preload links before stylesheets for maximum benefit.

Preloading Fonts

Quick Answer