Font Preload Generator
Generate the correct <link rel="preload"> tag for any web font. Includes the required crossorigin attribute, correct MIME type, and as="font" — all properties that are commonly wrong in hand-written preload tags.
Why preload tags are commonly wrong
Font preloads fail silently when any of these properties is wrong:
- Missing
as="font"— the browser treats it as a generic resource, not a font preload, so the real font request is not deduplicated. - Missing
crossorigin— fonts are always fetched in CORS mode. Without crossorigin, the browser downloads the font twice. - Wrong MIME type — some browsers warn but still preload; others drop the preload silently.
- Preloading fonts not used in the first view — steals bandwidth from LCP-critical resources.
Complete example in context
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/css/fonts.css">
<link rel="stylesheet" href="/css/main.css">
</head><head>. The browser parses head in order — a preload that appears after a stylesheet link is discovered too late to help.Frequently asked questions
Why does font preload need crossorigin?
Fonts are fetched in CORS mode. Without crossorigin on the preload, the browser considers the preload and the actual font request as two different resources and downloads twice — wasting bytes and often delaying LCP.
When should I preload a font?
Only for fonts used in the first rendered view — typically the body or hero heading font. Preloading fonts only used below the fold or on later pages steals bandwidth from LCP-critical resources.
How many fonts should I preload?
One, occasionally two. More than two preloads is almost always counterproductive. Use a single variable font file for maximum effect.
Does preload work with Google Fonts?
Only if you self-host Google Fonts. The URLs on fonts.gstatic.com include version hashes that change, making stable preload tags impossible. Self-host the font file, then preload your local copy.