How to variable fonts vs static fonts: when each wins
- Step 1Audit your weight usage — Inspect your design system's CSS for font-weight references. If you use 3+ distinct weights from the same family, variable typically wins on total bytes. If you use 1–2, static is leaner.
- Step 2Measure both options — Run the JAD Variable vs Static Comparator with your variable font. The tool projects static-equivalent sizes for 1–9 weights and shows the break-even point exactly.
- Step 3Pick by audience — If you support browsers older than 2019 (IE11, very old Safari, embedded WebKit), ship the static fallback. The Variable Font Freezer produces it. Every modern browser uses the variable version.
Frequently asked questions
When does variable win on size?+
Generally 3+ weights from the same family. A 5-weight Inter family at static is ~600 KB total; the variable Inter is ~280 KB — variable saves 53%. Below 3 weights, the per-weight overhead of variable axes makes static cheaper.
Does variable font support Italic?+
Yes — most variable fonts ship a separate italic file (rather than putting italic on a slnt or ital axis). Some advanced families like Roboto Flex put italic on an axis, but the convention is to keep italic separate.
Browser support for variable fonts?+
98%+ globally as of 2026 (Chrome 62+, Firefox 62+, Safari 11+, Edge 17+). The remaining 2% is IE11 and ancient Android. Use the Freezer to produce a static fallback for those audiences if needed.
Why does variable carry overhead?+
The gvar table stores deltas — per-axis adjustments to glyph outlines. Each axis multiplies the per-glyph data. A 1-axis variable font carries ~30% gvar overhead; a 5-axis one can carry 200%+. Trimming axis ranges (Axis Optimiser tool) helps when you don't use the full design space.
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.