How to build <link rel=preload> tags for your web fonts
- Step 1Enter font URLs — Paste one URL per line. Typically the WOFF2 path for your critical brand font (hero typography, body font on text-heavy pages).
- Step 2Get the preload HTML — Output: <link rel="preload" as="font" type="font/woff2" href="..." crossorigin> per URL. Drop into <head> before your stylesheet.
- Step 3Limit critical preloads — Preload 1–2 critical fonts only. More than that competes for early bytes and hurts LCP. The Builder warns if you enter more than 3 URLs.
Frequently asked questions
Why is crossorigin required?+
Fonts are CORS-restricted resources by spec. Without crossorigin, the preload triggers a second fetch and the resource isn't matched to the actual @font-face usage. Always include crossorigin on font preloads.
Should I use as="font" or as="style"?+
Always as="font" for fonts. as="style" is for CSS files. Wrong as= value means the browser doesn't allocate priority correctly and the preload may not improve LCP.
Should every font be preloaded?+
No. Only above-the-fold critical fonts (typically 1–2). Preloading every font increases bandwidth pressure and can hurt LCP by competing with the HTML for early bytes.
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.