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.
Hey thanks for trying out Snapfont! The heading basically matches heading tags only. There’s the odd edge case where it won’t apply the heading font but its quite rare.
Also, I’m quite excited about variable fonts and Snapfont is in a perfect position to be able to try out variable fonts but unfortunately getting a Chrome extension approved takes 1-3 weeks nowadays. There’s an update cooking right now, fingers crossed it gets approved by the coming week. If you would like to get the latest update, you can still manually download the font via Gumroad(https://gumroad.com/l/getsnapfont) and load it manually through the Google extensions page.
Not sure in what way it’s different from firefox’s reading mode
Does anyone know how to download the variable fonts to host them on your own server? I normally use this service, but it doesn’t support variable fonts yet: https://google-webfonts-helper.herokuapp.com/fonts
Also, I don’t even see Google Fonts delivering variable font files. Yes, you can add custom weights in the Google Fonts UI now, but in the browser you don’t get only one font file, but every weight is still one seperate request and file, even if your browser supports variable fonts. Just look at this CSS file – it includes the custom weight 666, but still as an additional, seperate woff2 file: https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;666
Ok, I found it out. You can get the variable font file, but not with the GUI, but via the API. Build the URL for the CSS file, open the CSS file and then use the (cryptic) link to the single variable font file. The syntax is explained here:
https://variablefonts.io/implementing-variable-fonts/#gf-api
https://developers.google.com/fonts/docs/css2#forming_api_urls