Variable fonts & the new Google Fonts API

Jason Pamental
Sep 18, 2019 · 4 min read

While I was at ATypI Tokyo a couple weeks ago, Google had some big announcements (I covered those a bit last week). The new version of their API was particularly great to hear, as this marks the first support for using variable fonts on their platform. It’s a small set of typefaces, but there is some nice variety and what they have is really well done. There are 10 typefaces in all, with a selection of serifs, sans, rounded, slab, and monospace. Two of the serifs have italics as well, making them an interesting experiment for body copy usage. I created an example page that we played around with a bit in my workshop last week, and included it live in my talk, both at Web Unleashed in Toronto. [Update: I created an even bigger resource at variablefonts.io in partnership with the Google Fonts team]

Sample page in CodePen
Sample page in CodePen
A sample page on CodePen loading Hepta Slab and Crimson Pro as variable fonts from Google Fonts’ new API

I’ve now created a demo on CodePen as well, and will walk through the setup here with a few examples. As the launch announcement page states, the syntax is pretty strict, but it didn’t take long to get up and running with it, and now it’s feeling pretty snappy.

Available variable fonts on Google Fonts
Available variable fonts on Google Fonts
Here are all the different variable fonts you can play with for now

In going through the announcement it’s clear that this will eventually be how all the fonts are served, not just specifically variable fonts. You can still request a single weight of a font, like so:

https://fonts.googleapis.com/css2?family=Roboto:wght@700

You can see that the font-family attribute/value pair is the same, but the way you specify weight and italic is a little different. Here’s the current syntax:

/css?family=Roboto:700

You’ll note that whereas the original syntax just expected a weight value (in this case 700) after the family name, now you’re specifying ‘wght’ and supplying a value. This is so when requisition a variable font, it’s now possible to specify an axis (or more than one), and then supply a second set of values after the ‘@’ sign. Multiple weights can be requested too:

/css2?family=Roboto:wght@400;700

Note that the weight values are listed after the ‘@’ sign separated by semicolons. If you wanted to add italics, you have to specify each combination:

/css2?family=Roboto:ital,wght@0,100;1,100;1,700

This will get you Italic and weight combinations of ‘upright 100’, ‘Italic 100’, and ‘Italic 700’.

Now for the variable fonts. To get Crimson Pro with a weight axis (with a range of 200 to 900), you would request it like this:

/css2?family=Crimson+Pro:wght@200..900

Note that this time the values after the ‘@’ sign are separated by ‘..’ which indicates that this is a range, not two separate values. When requesting Italics as well as upright, you have to indicate the axes and ranges requested for each:

/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900

Or just Italics with weight range:

/css2?family=Crimson+Pro:ital,wght@1,200..900

You can either link to the request from the ‘head’ of your HTML page, or ‘@import’ from within your CSS.

The whole thing looks like this:

<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">

Or:

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@ 0,200..900;1,200..900&display=swap');

You can then work with the fonts just as you would if you were self-hosting, and be confident that the family grouping will be working properly as well.

p {
font-family: ‘Crimson Pro’, Georgia, serif;
font-weight: 350;
}

Thus, with the code above any text in a paragraph would be set in Crimson Pro, and bold would be properly bold, and Italic actual Italics.

Sample page typeset in variable fonts from Google
Sample page typeset in variable fonts from Google
The sample page shows a nice range of weights in the Hepta Slab-set headings, and regular and a slightly bolded italic in Crimson Pro

Have a play around with the demo, and try swapping in some of the other fonts they have available. Don’t forget to send a tweet to the @GoogleFonts team and let them know you’re interested. Public support goes a long way. And if you spot any issues, you can log them over on GitHub.

Until next time, happy varying :)

Resources

This is an excerpt from my weekly newsletter about web fonts and typography. If you’d like a weekly dose of web typography tips, news, and my upcoming talks and workshops, you can sign up for the newsletter here.

If you this helpful, please share what you make — and if there’s something you’d like to see covered in a future issue, please let me know!

Originally published at rwt.io on September 18, 2019.

Web Typography News

A collection of web typography tips from my weekly…

Jason Pamental

Written by

designer, tinkerer, typographer, speaker. http://rwt.io, author:Responsive Typography (bit.ly/rwtbook). walker of @aProperCollie & @inImproperCollie

Web Typography News

A collection of web typography tips from my weekly newsletter. You can sign up for the newsletter via email at http://eepurl.com/ghd9b9 or find out more about Jason’s talks and writing at https://rwt.io

Jason Pamental

Written by

designer, tinkerer, typographer, speaker. http://rwt.io, author:Responsive Typography (bit.ly/rwtbook). walker of @aProperCollie & @inImproperCollie

Web Typography News

A collection of web typography tips from my weekly newsletter. You can sign up for the newsletter via email at http://eepurl.com/ghd9b9 or find out more about Jason’s talks and writing at https://rwt.io

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store