Variable Fonts: What web authors need to know

Last week I wrote a bit (well, a lot) about what the web wants from type designers, foundries, and providers when it comes to variable fonts. This week I’d like to talk about how we teach the web community how to use them. There are more and more people writing about variable fonts, what they are, and how to use them — which is amazing. But sometimes it’s hard for event the most knowledgeable authors to keep current with the latest developments and be sure the information that’s being provided is really up to date. And since this is a new and evolving space, that’s perhaps not that surprising.

It’s really important to use the standard properties wherever possible. These examples show how that might look

So this week I’d like to provide a simple, stripped-down look at the latest evolutions in the CSS specifications, updates on browser implementations, and why we should be using the appropriate CSS attributes where supported rather than resorting to ‘font-variation-settings’ all the time. I hope that this will be a useful resource, and while I can’t update the email once you receive it, I will keep it updated on my site as things change in the future.

I’m going to cover this from the ground up, as it were. We’ll start with the @font-face syntax itself — which I only discovered recently has changed in the past few months — and cover how you can write it to support both the current and upcoming implementations. Then we’ll look at the attributes that…