What Is a Variable Font?
A variable font is a single font file that contains a continuous range of design variations — weight, width, slant, and sometimes optical size — controlled with CSS axes like font-weight and font-stretch.
Instead of loading Inter-Regular.woff2, Inter-Medium.woff2, and Inter-Bold.woff2, you may load one Inter-Variable.woff2 and request any weight in between.
Why Developers Care
Potential benefits:
- Fewer HTTP requests when you need many weights
- Smoother weight animation and intermediate styles
- Smaller total transfer when you would otherwise ship 4–6 static files
Caveats:
- One variable file can be larger than two static files if you only need Regular + Bold
- Subsetting still matters — a full Latin+Cyrillic variable file can be heavy
- Not every commercial family offers a licensed variable webfont kit
Browser Support
Modern evergreen browsers support variable fonts well. The practical concern is rarely "does it work?" and more often "did we ship the right file and CSS?"
Use progressive enhancement:
@font-face {
font-family: "Inter";
src: url("/fonts/InterVariable.woff2") format("woff2-variations");
font-weight: 100 900;
font-display: swap;
}
Keep a static fallback stack for edge cases and email clients that ignore custom fonts entirely.
Licensing Reality Check
A variable font is still a font software product. Switching to .ttf variable format does not create new rights.
Watch for:
- Desktop-only variable files used illegally on the web
- Licenses that price per style instance vs per family (read the EULA)
- Adobe Fonts / subscription fonts that forbid self-hosting variable exports
- Pageview caps that still apply to a single variable file
Performance Decision Framework
| Your need | Prefer |
|---|---|
| Only 2 weights | Static WOFF2 files (often smaller) |
| 4+ weights or fluid UI weights | Variable font |
| Many languages / large glyph set | Aggressive subsetting either way |
| Strict brand weights only | Static files of those exact styles |
Compliance Tip
When auditing, treat a variable file as one more self-hosted asset. Record its family name, source, and license — the same way you would for static Bold and Regular.
Conclusion
Variable fonts are a performance tool, not a licensing shortcut. Use them when the weight range justifies the file size — and only when your web license covers the file you deploy.