Google Fonts + Variable Fonts

Celý článek

I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference really, except it's blue instead of red and this one pretty rad checkbox: Show only variable fonts.

An option to only show variable fonts is a pretty bold feature for the main navigation up there. That's a strong commitment to this feature. With Google Fonts having about 90% of the market share of hosted web fonts and serving trillions of requests, that's going to spike interest and usage of variable fonts in a big way. Web designers and developers have been excited about variable fonts for a while, but I'd bet this is the year we start seeing it in the wild in a much bigger way.

Something about variable fonts inspired the micro-site. See v-fonts.com and Axis-Praxis. Here's come another one: variablefonts.io! Like the others, it also has interactive examples, but it's also full of direct up-to-date advice and links to resources.

Another thing that's really great that Google Fonts has done somewhat recently is allowed for the usage of font-display. It's got a good default (swap), and is easily changable as a query param. Matt Hobbs has a recent article about what it is, how important it can be, and how to use it.

And while we're talking Google Fonts, I ran across the browser extension Snapfont the other day. It's a pay-what-you-want thing (I tossed them a fiver).

It just hard-replaces every font on the site with one you pick to get a quick taste of it. There are no options, so it's not for fine-tuning any choices. The "Heading" button didn't even work for me. But I like how simple and easy it was to get a taste for a site with a new font.

The post Google Fonts + Variable Fonts appeared first on CSS-Tricks.