How to preload vs prefetch vs preconnect: which for fonts
- Step 1preload (current page critical) — <link rel="preload" as="font" type="font/woff2" href="/fonts/inter.woff2" crossorigin>. High priority. Browser downloads alongside HTML parse. Use for 1–2 critical fonts.
- Step 2prefetch (future page) — <link rel="prefetch" as="font" type="font/woff2" href="/fonts/heavy.woff2" crossorigin>. Low priority. Browser downloads when idle. Use for fonts on likely-next pages.
- Step 3preconnect (cross-origin host) — <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>. Opens DNS + TLS handshake without downloading. Useful when you can't preload the specific font URL but know its host.
Frequently asked questions
Can I use preload and prefetch together?+
Don't on the same resource. preload makes prefetch redundant (preload is already starting the download). Use one or the other based on whether the font is current-page critical or future-page maybe.
When should I use preconnect for self-hosted fonts?+
Never if fonts are on the same origin as the HTML (no cross-origin overhead to skip). Useful only when fonts live on a separate CDN domain that the rest of the page doesn't already use.
Does prefetch hurt LCP?+
Slightly — prefetch competes for bandwidth with current-page resources. Modern browsers deprioritise prefetches; impact is usually small. Avoid prefetching huge fonts on slow networks.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.