How to generate ligature toggle css at build time
- Step 1Detect features per font — For each font in src/fonts/, parse with opentype.js, walk GSUB/GPOS feature lists, capture the feature tag set.
- Step 2Generate the CSS — Build feature-aware CSS: body uses liga + calt (always present); h1 adds dlig + swsh only if the font supports them. Output written to dist/typography.css.
- Step 3Validate in CI — Add a guard: if a new font is added without a recognised feature set, fail the build with a clear message. Forces explicit decisions about feature usage.
Frequently asked questions
What if my font lacks dlig?+
The script generates CSS that doesn't enable dlig for that font. font-feature-settings is forgiving — enabling a non-existent feature is a no-op, not an error. But the generated CSS is cleaner if it only enables what's actually there.
Does this work for variable fonts?+
Yes — feature lists are independent of axes. Variable fonts often have richer feature sets (more stylistic alternates) — the script picks them up automatically.
Should I commit the generated CSS?+
Same advice as other generated assets: commit if you want reproducible builds, .gitignore if you trust your CI cache. Most teams commit since fonts change rarely.
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.