How to set a variable font policy for your design system
- Step 1Define the modern path — Variable WOFF2 served to browsers with format("woff2") matched. Use font-variation-settings for fine control; expose discrete weights via @font-face mappings (Weight Presets Builder).
- Step 2Define the legacy path — Static WOFF2 (frozen from the variable source) for IE11 and ancient WebKit. Order in the src list after the variable file. The legacy weight set is typically smaller — Light, Regular, Bold cover most cases.
- Step 3Document the policy — Pin the variable + static fallback decision in your design system docs. Include the @font-face boilerplate, the build script that produces statics, and the test matrix that validates the result.
Frequently asked questions
Should everyone go variable-first?+
Most should, but not all. If your audience is 90% IE11 (rare in 2026 but possible in some intranets), ship static-only — variable fonts add complexity for zero benefit. If your audience is 99% modern, ship variable-first with no static fallback.
Does Figma support variable fonts?+
Yes since 2022. Figma reads font-variation-settings for axis values and shows discrete instances in the font picker. Designers get the same flexibility as developers.
What's the migration cost?+
For an existing static-only design system, switching to variable typically takes 1–2 sprints: source the variable font (often free for major families), update @font-face blocks, regenerate static fallbacks, run visual regression tests. Most teams report bandwidth savings of 30–60% post-migration.
Can I revert if it goes wrong?+
Yes — keep the static files in source control alongside the variable. If a critical visual regression appears, point @font-face directly at the static set. The variable font remains for the next attempt.
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.