Maybe I have been living under a rock, but I have only learned about this yesterday and thought I would share it with you guys.
Well, an images says more than … and an animated one is even better:
So it’s a new type of font file that includes all the font weights and variations in one file. Actually only the ‘regular’ and the extreme cases of a variation are there, and the ones in between are generated. e.g. font weight, that would be regular, thin and bold included and the rest generated:
Besides that, letter width, height, slant/italic can be variations, but also custom properties.
Playground
https://v-fonts.com/
Variable Google Fonts
https://fonts.google.com/?sort=date&vfonly
Guides:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts