Recently we shared with you all you wanted to know about CSS. And now we have something more to tell you. Do you know how is better to achieve multiple font styles? The best way is to use Variable Fonts with CSS.
Font variations is a new set of features defined as part of the OpenType specification. It allows for font files to contain multiple variations of a font within a single file, called a variable font. This in turns allows the use of one font file on the web that can achieve multiple font styles.
Variable fonts define their variations though axes of variation. There are 5 standard axes:
ital: Controls the italics. The value can be set using the
opsz: Controls the font’s optical size. The value can be set using the
slnt: Controls the slant of the font. The value can be set using the
wght: Controls the font’s weight. The value can be set using the
wdth: Controls the font’s width. The value can be set using the
Fonts can also specify custom axes, and these need to have a 4-letter uppercase name instead of the 4-letter lowercase names of the standard axes. The Decovar font demoed above is a prime example of a font using a multitude of custom axes.
The standard axes can be set with well-known CSS properties (e.g.:
wdth is set with
font-weight), and the new CSS
font-variation-settings is used to control the values for axes otherwise
Find more here.
You could be also interested in 6 CSS frameworks for 2019.