Variable Fonts Explained (and When to Use Them)
Variable fonts pack an entire type family — every weight, width, and often slant — into a single file you can dial to any point in between. Instead of shipping Regular, Medium, Bold, and Black as four separate files, you ship one variable file and request weight 437 or 712 or anything you like. That flexibility is genuinely useful, but it is not free, and it is not always the right call. This guide explains how variable fonts work, what the axes mean, and the specific situations where they pay off versus where a static family still wins.
If you are still sorting out the underlying containers, start with our guide to font file formats — a variable font is not a new format, just richer data inside the same TTF/OTF/WOFF2 files.
What Is a Variable Font?
A variable font is an OpenType font that defines a continuous design space rather than a fixed set of styles. The technology, introduced as OpenType Font Variations in 2016 by Apple, Google, Microsoft, and Adobe, stores a set of master designs and the math to interpolate smoothly between them. Move along an axis and the rasterizer generates the in-between shapes on the fly.
Practically, that means one file like Inter or Roboto Flex can represent what used to be a dozen-plus individual font files. You are no longer limited to the weights a foundry chose to cut — you select any value the axis allows.
Understanding Axes
Each thing you can vary is an axis, identified by a four-letter tag. There are five registered axes that behave consistently across fonts:
- Weight (
wght) — the most common axis, typically 1–1000. This replaces Thin through Black. - Width (
wdth) — condensed to expanded, expressed as a percentage of normal. - Italic (
ital) — a switch (0 or 1) between upright and a true italic design. - Slant (
slnt) — a continuous oblique angle in degrees, distinct from a true italic. - Optical size (
opsz) — adjusts the design for the size it is set at, thickening fine details for small text and refining them for display.
Beyond these, foundries can define custom axes with uppercase tags — grade (GRAD), which changes apparent weight without affecting layout width, is a popular one, as are playful axes like a serif-to-sans morph. Custom axes are powerful but only do what each specific font’s designer built in.
How to Use Variable Fonts on the Web
On the web you load a variable font exactly like any other, then control axes with CSS. Standard properties map to registered axes automatically — font-weight: 540 just works on a variable font with a wght axis. For finer or custom control, use font-variation-settings:
- Serve the file as WOFF2 in your
@font-facerule and declare the supported range, e.g.font-weight: 100 900;. - Set standard properties (
font-weight,font-stretch,font-style) where possible — they are more robust and animatable. - Drop to
font-variation-settings: "wght" 620, "GRAD" 50;only for custom axes.
The full @font-face setup, hosting, and font-display tuning are covered in our walkthrough on adding custom fonts to any website. One caveat: animating font-variation-settings directly does not always interpolate smoothly — prefer the mapped CSS properties when you want transitions.
The Performance Trade-off
The headline pitch is “one file instead of many,” and on the web that is often a real win — but read the math carefully. A single variable WOFF2 is larger than any one static weight, but usually much smaller than the sum of the static weights it replaces.
| Scenario | Better choice | Why |
|---|---|---|
| You use 3+ weights of one family | Variable font | One request beats downloading 3–4 separate files |
| You use only Regular + Bold | Static WOFF2 ×2 | Two small files are lighter than one full variable file |
| You need animated weight or grade | Variable font | Only variable fonts can interpolate live |
| Print / Office document | Static OTF | App support for variables is uneven outside design tools |
Subsetting matters as much as the format. A variable font subset to Latin and the weight range you actually use can drop from 300 KB+ to well under 100 KB. Without subsetting, a full multi-axis, multi-language variable file can be heavier than the static set it was meant to replace. And because the file you ship is a WOFF2, the same compression rules apply — our comparison of WOFF2 vs WOFF explains why you should serve the Brotli-compressed version of any variable font.
One more nuance: shipping a variable font does not force visitors to download every axis you do not use, but it does mean the file carries the full design space. If your brand genuinely only needs two weights, measure both options before assuming the variable file wins. The break-even point is usually around three styles — below that, two static WOFF2 files often come out lighter; above it, the single variable file pulls ahead and keeps pulling ahead as you add weights.
When to Use Variable Fonts (and When Not To)
Use them when: your design system spans several weights, you want fluid typographic effects, you care about responsive optical sizing, or you want a single brand file that designers can fine-tune. Families like Inter, Roboto Flex, Source Sans 3, and Recursive are excellent, free variable options from Google Fonts and Adobe.
Stick with static fonts when: you only need one or two styles, you are targeting environments with shaky variable support (some email clients, older office software, certain embedded systems), or your print workflow’s app does not fully honor named instances. To install a static or variable font on your own machine, see our guides for Mac and Windows — modern versions of both handle variable fonts, exposing their named instances in the font menu.
Browser and App Support in 2026
Browser support is a non-issue today: every current version of Chrome, Edge, Firefox, and Safari renders variable fonts and respects axis settings. Design-app support is strong in Figma, Illustrator, InDesign, and Photoshop, which expose axis sliders or named instances. The weak spots remain some email clients, a few CMS preview panes, and legacy office suites — test there before committing.
Frequently Asked Questions
What is a variable font in simple terms?
A variable font is a single font file that contains an entire family — all weights, and often widths and slants — along adjustable axes. Instead of installing separate Regular and Bold files, you load one file and select any weight or style in between, including values the foundry never cut as a fixed style.
Are variable fonts better than static fonts?
Not always. Variable fonts win when you use three or more styles of one family or need fluid effects, because one request replaces several files. If you only use Regular and Bold, two small static WOFF2 files are usually lighter. Choose based on how many styles you actually use.
Do variable fonts work in all browsers?
Yes. As of 2026, every current version of Chrome, Edge, Firefox, and Safari fully supports variable fonts and the font-variation-settings property. The remaining gaps are in some email clients and older office software, so test those environments if your project depends on them.
How do I control a variable font’s weight in CSS?
For the standard weight axis, just use font-weight with any number in the supported range, like font-weight: 540. For custom axes such as grade or optical size, use font-variation-settings, for example: font-variation-settings: “wght” 540, “opsz” 28. Prefer the standard properties when you can.
Are free variable fonts available?
Yes. Google Fonts offers many open-source variable fonts including Inter, Roboto Flex, Source Sans 3, and Recursive, all free for commercial use. Adobe Fonts also includes variable families with a Creative Cloud subscription. Always confirm the specific license for web embedding before deploying.
