How to generate @font-face css at build time
- Step 1Walk fonts directory — fs.readdir(input). For each font, parse the filename (Inter-Regular.woff2 → family Inter, weight Regular, format woff2). Group by family + weight + style.
- Step 2Emit @font-face per group — For each unique family/weight/style combo, emit a @font-face block with the matched src list, format() hints, font-display: swap, and computed font-weight (Regular = 400, Bold = 700, etc.).
- Step 3Write to dist/fonts.css — Single CSS file imported by your global stylesheet. Browser caches; future deploys serve the same file unless fonts change. Idempotent across re-runs.
Frequently asked questions
How do I encode weight in the filename?+
Convention: <Family>-<Weight>.woff2. Common weight names: Thin (100), ExtraLight (200), Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700), ExtraBold (800), Black (900). The script maps these strings to numeric values.
What about italic?+
Suffix the weight with Italic: Inter-RegularItalic.woff2 → weight 400, style italic. The script emits font-style: italic for these and pairs them with the upright variant under the same family name.
Can I customise font-display per font?+
Yes — extend the config: critical fonts get font-display: swap; secondary fonts get font-display: optional. The script emits the right value per group.
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.