How to whitelist-subset hero fonts in your build pipeline
- Step 1Extract hero characters — Build script reads the rendered HTML for the hero section. Strips tags, deduplicates characters, sorts by codepoint. Result: a deterministic character whitelist.
- Step 2Subset the hero font — Run the JAD Whitelist Builder helper against the source hero font with the extracted character list. Output: hero-subset.ttf.
- Step 3Compress and ship — TTF → WOFF2. Final hero font: 1.5–3 KB. Reference via @font-face for the hero element only. Body type uses a charset-subsetted font in a separate declaration.
Frequently asked questions
What if hero text changes between deploys?+
Re-runs of the script automatically pick up new characters. Cache invalidation: hash the whitelist string and use it as the WOFF2 filename suffix. Browsers fetch the new font on the next visit; old hash files cache forever.
Can I extract from JSX/MDX?+
Yes — render to static HTML first (Next.js static export, Astro build) then extract from the rendered output. Pre-render content is exactly the right input for whitelist extraction.
What about A/B-tested hero copy?+
Tricky — the whitelist needs to cover both variants. Easiest: union the characters from all variants before subsetting. Output is still tiny (50 chars max for typical hero pairs).
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.