How to <link rel=preload> attributes: complete reference
- Step 1Required: as, href — as="font" tells the browser what type of resource. href="/fonts/inter.woff2" is the URL to preload. Both required.
- Step 2Recommended: type, crossorigin — type="font/woff2" specifies MIME type (helps browser skip unsupported formats). crossorigin (no value) marks the font as CORS-fetchable for @font-face reuse. Both strongly recommended for fonts.
- Step 3Optional: media, fetchpriority, integrity — media="(min-width: 768px)" preloads conditionally. fetchpriority="high" boosts priority above the default for as=font (which is already high). integrity="sha256-..." adds Subresource Integrity verification.
Frequently asked questions
Why is crossorigin required without a value?+
Bare crossorigin equals crossorigin="anonymous" — same as the @font-face fetch. Without it, the preload uses a different request mode and the browser doesn't reuse the preloaded resource for the actual font load. Always include.
Does fetchpriority help for fonts?+
Slightly — as=font is already high priority by default. fetchpriority="high" forces it above the implicit default, useful when the page has many high-priority resources competing. Browser support: Chrome 102+, Firefox 132+.
What about media queries?+
media="(min-width: 768px)" preloads only when the query matches. Useful for desktop-only fonts that aren't shipped to mobile. Browser support is universal.
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.