Variable fonts make it possible to have different variations of the same font within a single file. These fonts contain one or more axis that allow changing the appearance of the font and provide much more flexibility than static fonts. So instead of having to load a font for each font-weight, a single font could be loaded that supports weights in the range from
1000 in steps of
There are 5 registered axes which can be identified by 4 letter lowercase names: Weight
slnt, Optical size
opsz and Italics
ital. It depends on the font if these are implemented or not. Font weight and italics seem to be the most commonly supported axes.
The CSS property
font-variation-settings can be used to set the value for each axis. The axis names are case sensitive.
/* Weight can be any value between 100 and 1000 */ font-weight: 375; font-variation-settings: 'wght' 375; /* Width as percentage */ font-stretch: 110%; font-variation-settings: 'wdth' 110; /* Italics only allows two values: on (1) and off (0) */ font-style: italic; font-variation-settings: 'ital' 1; /* Optical size */ font-optical-sizing: auto; font-variation-settings: 'opsz' 36; /* Slant, also known as Oblique, is set in degrees */ font-style: oblique 8deg; font-variation-settings: 'slnt' 8;
Besides the registered axes there is also support for custom axes, which can be identified by four letter uppercase names. For example
/* Grade (relative weigth) */ font-variation-settings: 'GRAD' 88;
There are many variable fonts available on Google Fonts
For more information see also this guide about variable fonts on MDN