If you need to catch up on the basic concept of variable fonts, read about Variable fonts.
An understanding of CSS properties is essential to the correct implementation of variable webfonts, see Adding Webfonts to your Site.
For variable fonts the @font-face declaration is set in the same way as for non-variable web fonts but for the font to work predictably the descriptors (font-weight, font-style etc.) will be expressed using the variable parameters of the font.
So for a variable font, the basic @font-face declaration might look like this:
@font-face {
font-family: 'Browser Variable';
src: url('Browser-Variable.ttf') format('truetype-variations');
font-weight: 1 1000;
font-stretch: 60% 140%;
font-style: oblique 0deg 20deg;
font-synthesis: none;
}
The descriptor 'font-style' can be used to indicate that a font is italic and may also be used to specify the input range of an oblique font. Some browsers will happily implement the font without these descriptors but others will not, so they must be included.
The descriptor 'font-synthesis' is set to 'none' to prevent the browser imposing it's own synthesised versions of italic or bold.
Although the simple non-variable descriptors such as 'font-weight' should be used for standard settings, taking a standard CSS paragraph as an example …
p {
font-weight: 350;
font-stretch: 110;
}
… the variable font descriptor 'font-variation-settings' will ensure that all the variable axes are recognised, for example
p {
font-variation-settings: "wght" 350, "wdth" 110; "SERF" 200;
}
Don't forget that older browsers may not support variable fonts, so the following simple check will alert the browser and set a fallback font:
p {
font-family: 'helvetica', sans-serif;
}
@supports (font-variation-settings: 'wdth' 110) {
p {
font-family: 'Browser-Variable';
}
}
There are numerous CSS techniques to implement variable fonts and this article provides only some basics. For more detailed information, see
Variable fonts guide - CSS: Cascading Style Sheets | MDN
Wakamai Fondue, the tool that answers the question “what can my font do?”
older, but still relevant
One File, Many Options: Using Variable Fonts on the Web | CSS-Tricks