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
The API has a limited selection of fonts available and the syntax takes a little while getting 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:
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:[email protected]');
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:[email protected];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,[email protected],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:[email protected]');
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,[email protected],200..900;1,200..900');
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,[email protected],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.
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.