Variable fonts in production: design system breakthrough.
One file, infinite weights, smaller payloads. Variable fonts have been theoretically excellent for three years. We finally shipped one in production — here's what happened.
Variable fonts have been a spec since 2016. Browser support has been 'good enough' since 2019. The tooling and font availability finally caught up this year, and we shipped our first all-variable typography stack in November. Some honest notes.
What it replaced
- 01Six static font files (Light, Regular, Medium, SemiBold, Bold, Black) at roughly 60KB each.
- 02Hand-managed font-display rules to prioritise the first weight to load.
- 03FOIT/FOUT mitigation that was always fragile in different browsers.
What we shipped instead
- 01One variable font file at roughly 90KB.
- 02CSS using font-variation-settings or simply font-weight: 250 through 900.
- 03Animation between weights on hover or scroll, which used to be impossible.
The CSS, in practice
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Any weight on the variable axis — no extra HTTP request */
.heading {
font-family: 'Inter', sans-serif;
font-weight: 580; /* between SemiBold and Bold */
letter-spacing: -0.02em;
}
/* Animate weight on hover */
.title {
transition: font-weight 250ms ease;
font-weight: 400;
}
.title:hover {
font-weight: 700;
}The wins
| Metric | Static fonts | Variable font |
|---|---|---|
| Total font payload | ~360KB (6 files) | ~90KB (1 file) |
| HTTP requests | 6 file requests | 1 file request |
| Available weights | 6 (Light → Black) | Continuous 100 → 900 |
| Weight animation | Not possible | Smooth transition |
| First Contentful Paint impact | Baseline | ~120ms faster |
Net positive after three months in production. We're now defaulting to variable fonts for every new build where the typeface offers one.
What we'd watch for
- 01Older versions of Safari occasionally render variation axes inconsistently.
- 02Self-hosting is worth the effort — Google Fonts variable serving was patchy for a while.
- 03Test specific weights you actually use. Don't just rely on the variable axis being 'continuous'.
After three months in production: net positive. We're now defaulting to variable fonts for every new build where the typeface offers one.