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.

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.

<!-- 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

Product Designer, Font Specialist

Preload & Preconnect FAQs

Common questions about font resource hints