When should I preload fonts?

Preload only critical above-the-fold fonts (1-2 files max). Preloading too many fonts wastes bandwidth and can slow down other critical resources.

What's the difference between preload and preconnect for fonts?

preload downloads a specific font file early. preconnect establishes connection to a font origin (like fonts.googleapis.com) before it's needed. Use both for external fonts.

How do I preload fonts correctly?

Use: . The crossorigin attribute is required even for same-origin fonts.

Does preloading fonts improve Core Web Vitals?

Yes, preloading critical fonts can improve LCP by 100-300ms. It ensures fonts start downloading immediately rather than waiting for CSS parsing.

Should I preconnect to Google Fonts?

Yes if using Google Fonts CDN. Add preconnect to both fonts.googleapis.com (CSS) and fonts.gstatic.com (font files). Better yet, self-host to eliminate these connections entirely.

Preload & Preconnect Fonts

Use resource hints to prioritize font loading. Master preload, preconnect, prefetch, and dns-prefetch for faster font delivery.

Key Takeaways

• preload: Download font immediately. Use for critical above-fold fonts
• preconnect: Establish early connection to font CDN
• prefetch: Download font for next page navigation
• Only preload 1-2 fonts to avoid competing with other resources

In this article

rel="preload" for Fonts

Preload tells the browser to download a resource immediately with high priority. Use it for fonts that are critical to render above-the-fold content. Always preload fonts in WOFF2 format since it provides the smallest file size and is supported by all modern browsers, keeping the preload payload as small as possible. After the initial visit, browsers rely on the cache rather than preloading again, so pairing preload with proper font caching strategies is essential for good repeat-visit performance.

Correct Preload Syntax

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

as="font": Required. Tells browser this is a font.

type="font/woff2": Recommended. Helps browser decide if usable.

crossorigin: Required. Fonts always require CORS.

Common Mistakes

• Missing crossorigin: font fetched twice
• Preloading too many fonts: competes with other resources
• Mismatched URL between preload and @font-face

rel="preconnect" for CDNs

Preconnect establishes an early connection to a third-party origin. Use when loading fonts from external CDNs. When using a third-party font CDN, also review the font embedding restrictions guide to confirm that loading fonts from a CDN on your domain is permitted under the font's license. For a complete walkthrough of configuring a CDN origin for fonts, including CORS headers and cache rules, see the CDN font setup workflow guide.

<!-- For Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- For your CDN -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

Connection Savings

Preconnect saves DNS (~50ms) + TCP (~100ms) + TLS (~100ms) = up to 250ms.

Comparison Table

Hint	What It Does	When to Use
preload	Downloads immediately	Critical fonts
preconnect	Establishes connection	External font CDNs
dns-prefetch	DNS lookup only	Fallback for preconnect
prefetch	Low priority download	Fonts for next page

Optimize Your Fonts

Convert to WOFF2 and subset to minimize preload payload size.

Subset Your Fonts

Written & Verified by

Sarah Mitchell

Typography expert specializing in font design, web typography, and accessibility

Preload & Preconnect FAQs

Common questions about font resource hints