Variable Fonts
Overview
Historically, if a designer wanted to use Light (300), Regular (400), Bold (700), and Italic versions of a font, the frontend engineer had to download 4 completely separate font files. Variable Fonts are a revolutionary advancement. They compress every single possible weight, slant, and width variation into one single, highly optimized file. The browser then mathematically interpolates the exact weight you request in real-time.
Syntax
/* 1. Import the single Variable Font file */
@font-face {
font-family: 'InterVariable';
/* The format is strictly 'woff2-variations' */
src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
/* We define the supported RANGE of weights, not a single weight */
font-weight: 100 900;
font-display: swap;
}
h1 {
font-family: 'InterVariable', sans-serif;
/* You can now use ANY exact number, not just hundreds! */
font-weight: 753;
}
.slanted {
/* Variable fonts can expose custom axes, like 'slnt' for slant */
font-variation-settings: 'slnt' -10;
}Common Pitfalls
- Assuming a standard font file (like
Roboto-Regular.ttf) will magically act as a variable font. You must explicitly download a font that has been specifically compiled and engineered as a Variable Font (often denoted with a[wght]or-Variablesuffix). - Using
font-variation-settings: 'wght' 700;to set font weight. While this works, it destroys CSS accessibility inheritance. You should always use the standardfont-weight: 700;property, and the browser will automatically map it to the variable font'swghtaxis under the hood.
Interview Questions
Massive bandwidth reduction and fewer HTTP requests. Instead of downloading 5 different files for 5 different weights (totaling ~250kb), you download a single variable font file (~80kb) that mathematically generates infinite weights.
Real-World Example
Animating the font weight dynamically on hover using a variable font.
/*
Because variable fonts contain every exact intermediate weight (401, 402, 403...),
we can cleanly animate the thickness in real-time!
*/
.hover-bold {
font-weight: 400;
transition: font-weight 0.3s ease;
}
.hover-bold:hover {
font-weight: 800; /* Smoothly morphs from thin to thick */
}Check Your Knowledge
Test your understanding of Variable Fonts with these quick questions.