Variable Fonts from Google Fonts

• October 07 2019
• 4 min. read

Developers who, like me, like Google Fonts have been frustrated by their not having Variable Fonts available.

That has changed in the last few weeks. Google has released an experimental API, available at fonts.googleapis.com/css2.

The API has a limited selection of fonts available and the syntax takes a little while to get used to it. Google font developers make the following assertion:

This version of the API isn’t completely stable. It’s best for experimental work while we document the new endpoint.

Syntax and Limitations #

The new API announced in this codepen shows examples of how to use the new API and the difference between the new and the old API.

Once again, remember that the new API is not final and may change in unexpected ways. Until the API is finalized I'd advice against using it in production code.

The new endpoint is very strict about accepting requests.

• List axes alphabetically
• Axis value groups (i.e. tuples) need to be sorted numerically
• Tuples can’t overlap or touch (e.g. wght 400..500 and 500..600)

The following examples are, as far as I understand them, how the new API works. They all use the Roboto font.

Emulating the old API #

To load a single font without worrying about specifics, we can load it with the following command:

@import url('https://fonts.googleapis.com/css2?family=Roboto');

Indicating a Single Value #

We can further refine the request by indicating what axis/value combination we want.

We do this by adding a colon and then indicating the axis name and value separated by an ampersand (@)

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700');

Selecting multiple values from the same font #

There are times when we want different values from the same axis and don't want to add them separated by a semicolon (;)

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700');

Selecting mutliple font faces #

Google Fonts gives us the choice of working with multiple styles for the same font. The syntax gets slightly more complex.

We first list the two axes in alphabetical order then use an ampersand (@) and then, for each axis we give the index of the axis and the value we want to use separated by a comma (,) and each comma-separated value separated by a semicolon (;).

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,700;1,700');

Working with variable fonts #

The new API gives us the option of working with variable fonts and one or more axes available to the font.

Selecting a range of values from a single axis #

Using multiple values of a single axis is similar too how we work a single axis but instead of putting the value as an index/value pair we use the values separated by two periods (..).

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900');

Using ranges of values from multiple axes #

This is the most intriguing part and what makes variable fonts so exciting to work with.

This example defines two axes and the range of values that we want to use for each.

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

Adding display: swap #

The font-display attribute allows developers to control how a font is displayed based on whether and when it is downloaded and ready to use.

To use font-display with Google fonts add the ?display= plus the value of font-display you want to use as the last element of the URL.

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

Available Variable Fonts #

This is a list of the fonts available under the new API as of August 28, 2019.

Closing Notes #

While this is not a final API it gives us a lot of power in terms of we can use variable fonts in the Google Fonts API.

It'll be interesting to see what additional fonts become available and what creative avenues it opens for typography on the web.

Edit on Github