Generate the right <link rel="preload"> tags for above-the-fold web fonts. Cuts LCP by 100–500 ms by starting the font fetch alongside the HTML parse.
Enter the font URLs (or upload a font and we pre-fill its filename)
We build <link rel="preload"> tags with as="font", correct type, and crossorigin
Paste into your <head> — preloaded fonts start downloading in parallel with the HTML parse
0 bytes uploaded. Font Preload & Prefetch Tag Builder runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
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.
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.
Prefetch is for fonts on the next likely navigation, not the current page. Use it for the font of an article body when the user is on an index page that links to many articles.
Build a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.
Open toolDecide between auto, block, swap, fallback, and optional. Get an explanation of each value's behaviour, recommended use cases, and copy-paste @font-face CSS.
Open toolPaste a Google Fonts URL or name and get a self-hosted @font-face CSS block plus a curl script for downloading every WOFF2. Privacy-friendly, GDPR-safe.
Open tool