Use-Cases of this video
- Know what variable fonts are, and how they can be applied in HTML pages.
- Know how variable fonts are going to change web design.
Variable fonts is a new font technology that allows a single font file to store multiple variations of the font. Variable fonts are going to bring a major change in web design.
Whenever we need to import a font in our use-case, we need a different file for each of the variations. For example, we would need separate files for importing Roboto Normal, Roboto 300, Roboto 400 Italic, Roboto 300 Italic and so on. This is how standard fonts work.
However with variable fonts, all possible combinations of a font are contained within a single file. That is, there would be a single file for Roboto Normal, Roboto 300, Roboto 400 Italic, Roboto 300 Italic, and more. For using variable fonts in webpages, we can refer to each of the allowed combinations through CSS. Variations such as Weight, Italics, Width, Slant, Optical Size are present in variable fonts. A font designer can even design his own variation in a variable font.
The below video gives an introduction to the concepts in variable fonts, and how they can be used in HTML. As of Dec 2019, about 90% of browsers support variable fonts.