Variable fonts

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 100 to 1000 in steps of 1.

There are 5 registered axes which can be identified by 4 letter lowercase names: Weight wght, Width wdth, Slant 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 GRAD or TIME.

/* 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