How to auto-generate font preload tags in ci
- Step 1Read fonts manifest — fonts.manifest.json (output from Fingerprinter): { source: { hashedFilename, sriAttribute } }. Mark a subset as 'critical' for preloading.
- Step 2Emit preload HTML — For each critical font, emit <link rel="preload" as="font" type="font/woff2" href="/fonts/<hashedFilename>" crossorigin>. Output to dist/preload.html.
- Step 3Inject into head template — Build step injects dist/preload.html into the head of every page. Layouts that don't need preload (admin pages?) opt out via per-template flags.
Frequently asked questions
How do I mark fonts as critical?+
In fonts.manifest.json, add 'critical: true' for the 1–2 fonts on the LCP path. Default is non-critical. The Fingerprinter respects the flag when generating preload output.
Does this handle per-page critical fonts?+
Yes — extend the manifest with per-template flags. The build script emits preload tags scoped to the right templates. Fancy: emit different head templates per route, each with the right preloads.
What about removing preloads on font removal?+
If a font is removed from the manifest, its preload tag isn't emitted. Old HTML caches may have stale preload tags pointing at deleted fonts — clear the CDN cache to ensure clean state.
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.