All the variable fonts found in Google Fonts as of today (22 March 2020) + Montserrat
- optimized for Latin/European languages (latin subset with glyphhanger)
In the example folder, you'll find a basic example to show how to use variable fonts the easiest way.
Here are some key points:
- It doesn't work on IE and other old browsers that don't support CSS Variables
- This example uses variable fonts with 2 different files for normal and italic
- If you use a variable font with no italic style file, you'll have a fake italic
- To reduce the number of static fonts files loaded, we rely on fake italic when needed
- If you want to use Inter variable font, it's another story because Slant is harder to setup than Italic 😨
Due to some inconsistencies with how browsers handle variable font files that contain both italic and upright variants, I recommend starting with the kind of "classic" setup I use in my example.
It's also easier to setup and the font-style: italic css property works as expected out of the box.
If you want to thank me or support my work, you can buy me a coffee 😉