📝 CSS-Tricks 259: How to use variable fonts

View this newsletter on the web.

I have a terrible confession to make. Send me to jail and lock away the key because, despite how much I rant about variable fonts, I’ve never really used them. I’ve read tutorials and demos and I love seeing what’s possible with this new font format, but I’ve never used any of them in a website of my own.

So this weekend I wanted to fix that. I started looking around for variable fonts to play with and, well, did you know that test fonts are a thing? A lot of type foundries will offer fonts that are free to download and play around with in your local environments before you buy them. They’re super handy and that’s just what I did the other day.

First, I headed over to David Jonathan Ross’s website where I discovered the ever-so-good Job Clarendon that he designed alongside Bethany Heck:

Welp! Also, Job Clarendon has a great variable font version available and you can download it for free (so long as you’re being a cool chap and only using it on your computer).

So, first things first: how do we load Job Clarendon as a variable font and make it accessible from our CSS? The first thing to note is that we have to support both the new syntax and the old syntax for variable fonts:

@font-face { font-family: "JobClarendon"; src: url("job-clarendon.woff2") format("woff2 supports variations"), url("job-clarendon.woff2") format("woff2-variations"); font-weight: 100 1000; }

We’re pointing to the same variable font file here (which note is a regular ol’ .woff2 file) but we have to tell the browser that it supports “variations.” woff2 supports variations is the future syntax for telling the browser it’s a variable font and woff2-variations is the deprecated way.

You see that weird part underneath where we’ve said font-weight: 100 1000? That’s not a mistake, we’re telling the browser that this font supports a range of font-weights from the light weight 100, all the way up to the heaviest weight of 1000.

We can then use our variable font just like we can any other, but whilst I was working on adding these demo font, I realized that I could use CSS custom properties to set the fallback font if for whatever reason this one can’t load:

:root { --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans; } h1, h2 { font-family: "JobClarendon", var(--font-fallback); }

Now that’s pretty handy. I could even set different fallbacks for my display and body text font. From here we can then set an element to use one of those ranges between 100 and 1000:

h1 { font-weight: 600; } h2 { font-weight: 250; }

Right now it looks like there are five “common axes” that fonts let us change variably. So that’s stuff like font-weight and font-stretch which lets you make letters more or less condensed. This all depends on what the specific font supports though, so make sure you know what features the font has before you buy it (this is why test fonts rule).

Another place to check out is Variable Fonts, which I know I’ve mentioned in every human conversation I’ve had the past year, but still, it’s a great place to find cool new variable fonts.

With variable fonts, we can do wild things with animations. So now that I can change any font-weight between 100 and 1000, I can also animate between those properties, too. Why is that a good idea? Well, most of the time it’s probably not a good idea. But you could set really big and beautiful headlines like this:

@keyframes scale { 0% { font-weight: 100; } 100% { font-weight: 1000; } } .element { font-size: 15vw; animation: 4s ease-out scale alternate infinite; }

That said, I don’t think animations are what that excite me most about variable fonts. Instead, the most exciting thing about variable fonts is the ability to making really small changes to text because, the more you look at type on the web, the more you realize it’s either way too thin or way too bold.

But now with variable fonts we can get it just right.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s