---
title: "Variable fonts in production: design system breakthrough."
date: 2020-12-28
url: https://remiam.co.uk/notes/variable-fonts-in-production
tags: [Typography, Performance, Web]
read_time_minutes: 6
description: "Variable fonts in production — what we learnt shipping a single variable font file across an entire design system, with notes on payload and tooling."
---

# Variable fonts in production: design system breakthrough.

*Published 2020-12-28 · 6 min read · by Liam (Remiam)*

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

- Six static font files (Light, Regular, Medium, SemiBold, Bold, Black) at roughly 60KB each.
- Hand-managed font-display rules to prioritise the first weight to load.
- FOIT/FOUT mitigation that was always fragile in different browsers.

## What we shipped instead

- One variable font file at roughly 90KB.
- CSS using font-variation-settings or simply font-weight: 250 through 900.
- Animation between weights on hover or scroll, which used to be impossible.

## The CSS, in practice

```css fonts.css
@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 |

*Static vs variable font cost, before and after switching.*

> 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

- Older versions of Safari occasionally render variation axes inconsistently.
- Self-hosting is worth the effort — Google Fonts variable serving was patchy for a while.
- Test 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.

## References

1. [MDN — Variable fonts guide](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide)
2. [V-Fonts.com — variable font catalogue](https://v-fonts.com/)
3. [Variable Fonts spec — W3C](https://www.w3.org/TR/css-fonts-4/)