How to generate font fingerprints in your build pipeline
- Step 1Hash each font — For each font in src/fonts/, read bytes, compute SHA-256 via crypto.createHash. Capture both full hex and short 8-char prefix.
- Step 2Rename with hash — Copy to dist/fonts/<basename>.<short>.<ext>. Source files stay untouched in src/; dist/ contains the cache-busted production assets.
- Step 3Emit a manifest — Write fonts.manifest.json with { sourceFile: { hash, hashedFilename, sriAttribute } }. Templates and HTML generation code consume this for preload tags.
Frequently asked questions
Should I use the full hash or short prefix?+
Short (8 chars) for filenames — keeps URLs readable. Full (64 chars) for SRI attributes — required by spec. The script emits both per font.
What about the cdn.example.com prefix?+
The script outputs relative paths; your HTML template prefixes with the CDN URL. Decoupling means you can change CDN without re-running fingerprint.
How do I integrate with Next.js?+
Run as a prebuild step. Next.js's static asset handler serves dist/fonts/<hash>.woff2 directly. Reference in CSS: src: url('/fonts/Inter-Regular.abc12345.woff2'). The Node script writes the CSS too.
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.