Font Preload + Preconnect Generator
One correct <link rel=preload> beats three broken ones. Generate the exact tags — with crossorigin — for your self-hosted or Google-hosted webfont.
Runs entirely in your browser — no upload, no registration.
Preload your font file
<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>Preconnect (Google Fonts users only)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>What this tool does
Emits a preload tag with as=font, the correct MIME type, and the mandatory crossorigin flag; plus preconnect tags for the Google Fonts origins.
Why you might need it
A missing crossorigin flag or wrong type stops the browser from using the preload, so the font still loads twice.
How to use it
- Paste your font URL.
- Copy the tag into your <head>.
- Preload only the fonts that appear in the initial viewport — everything else is wasted bandwidth.
Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.