Variable fonts are a brilliant idea. They embed in a single file the many styles they can have. In this way, the resulting size is much smaller, and they provide increased versatility. For example, you are not limited to regular, bold, light, condensed, expanded stretches, etc. Instead, you can specify numeric values with higher granularity.
They are quite recent: they started being supported by operating systems and libraries around 2017.
Later, also web browsers started supporting them. But, at the moment of writing, the support has not been standardized yet. In other words: use at your own risk 🤐️.
And I tried to. Six months ago, I switched to variable fonts. Lately, however, I have noticed some nasty problems.
Chrome and the faux italic
I love the Inconsolata font. I have been using it as my system-wide monospace and for my site for the latest years. It has only a defect: it does not have an italic variant.
But this is not a real issue because browsers can fake it by slanting the font… or can they?
Sure, if you are using Firefox. But if you are using Chrome, it will not do it. And this includes Chrome on desktop, mobile, and all the browsers based on Android’s WebView.
You will absolutely need your font to provide either an italic, or an oblique, or a slant customization axis.
But try to install the variable font on your system and just use it without any @font-face on your code. Chrome will be able to render all its variations and even faux the italic.
Of course, this is not the solution, so I just gave up with variable fonts.
Conflicts with the locally installed version
I did it also because this is not the only funky behavior of Chrome. I kept the variable version on my system. I also had a local('Inconsolata') on the various @font-face definitions.
For some reason, this made the pages be displayed as bold on Linux.
And on the developer console, you could see that the fonts were all downloaded, except for the regular version. And while the former was unique to that configuration, the latter also happened on other platforms and other browsers.
So, I sacrificed the local version as well and set all the fonts to be downloaded.
Remember when I told you that variable fonts are smaller? Well, I lied, but just a little bit.
Variable TTF/OTF are much smaller than having dozens of the static counterparts needed to achieve the same versatility. But in my case, I only use regular, bold, and extra light: together, they are less than 120kB, versus around 150kB for the variable file.
Therefore, the static configuration is the best for me.
I am a bit sad, though, because I really liked the idea. But I am sure that all these problems will be solved, eventually.
References
- Variable font, on Wikipedia
- Variable font guide, on MDN
- CSS Fonts Module Level 4, a W3C draft at the moment of writing
- How to Italicize Text, on CSS-Tricks