Infinite styles in a single file. Explore the future of typography with interactive demos of Google Fonts variable typefaces.
Variable fonts are a single font file that contains multiple variations of a typeface. Instead of needing separate files for Regular, Bold, Light, etc., a variable font lets you access any weight, width, or other axis along a continuous spectrum.
One file replaces many
Any value along axes
Animate in real-time
/* Load the variable font */
@font-face {
font-family: 'Inter';
src: url('Inter-VariableFont.woff2') format('woff2');
font-weight: 100 900; /* Range of weights */
}
/* Use any weight along the axis */
.light { font-weight: 300; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }
.custom { font-weight: 550; } /* Any value! */
/* Or use font-variation-settings for custom axes */
.custom-axes {
font-variation-settings:
'wght' 450,
'CASL' 0.5,
'MONO' 1;
}