Implementing Variable Fonts

Once requested, you can specify any value within that range in your CSS. In the case of the weight axis, that corresponds to the standard font-weight attribute.

Italics can be requested separately with the corresponding weight axis range, or as a combination (if available) of both upright and italic in the full requested range.

Just italics with a weight range of 200-900:

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

Or both upright and italics in the same range:

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

There are detailed notes on the syntax in the documentation, but here are a couple of points to remember:

• Keep the axes listed in alphabetical order
• Keep corresponding value sets in numerical order

  p {
    font-weight: 350;
  }
  strong {
    font-weight: 575;
  }

Hosting variable fonts on your site is not much different than hosting standard ones, but there are a few key parts that must be included in order for them to work best. While there have been several iterations of the specification, these examples will show the most current and complete implementation to ensure the broadest compatibility.

The code example shows how the @font-face rules would look in your CSS.

So the first part you’ll notice is the source. Because the CSS specification is evolving, including both format hints guarantees it will work now and in the future, once the full specification is supported in browsers. The first syntax (woff2 supports variations) is the more modern of the two, since there will also be color fonts, so there needs to be a way to indicate combinations of features. The second (woff2-variations) is the currently supported syntax in all supporting browsers. As support evolves, the newer syntax will take over without compromising support for older browsers.

Next, you’ll notice lines that show ranges for font-stretch, font-style, and font-weight. These help inform the browser as to how the font should behave and provide some indication about what CSS values are valid for that font.

  @font-face {
    font-family: Roboto Extremo;
    src: 
      url('..path/to/fonts/roboto_extremo.woff2') 
      format(‘woff2 supports variations’),
      url('..path/to/fonts/roboto_extremo.woff2') 
      format('woff2-variations');
    font-stretch: 25% 150%;
    font-style: oblique 0deg 10deg;
    font-weight: 100 900;
    font-display: swap;
  }

You can now find variable fonts right in the Google Fonts interface itself. A checkbox in the search interface lets you “show only variable fonts” in the results. Ticking that box is the quickest way to browse what’s available to customize.

When you select one of the families with the “Variable” label in the top right corner, you’ll find the variable version at the bottom of the styles list.

Individual Styles

To create a custom style, just move the slider to the desired value (shown above) and follow the same steps as with any other font.

This process gives you an embed code for a single instance (a font-weight of 284, for example)—or multiple static instances if you select more than one. Enabling the whole range requires only a small change to the code.

The embed code for Oswald with a static weight would look like this:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@284&display=swap" rel="stylesheet">

Some families have a range of weights that go beyond the traditional range of 9 separate fonts from 100 to 900. For example, here’s the minimum weight of Hepta Slab, a font-weight value of 1! This is new. As a designer, you’ll need to handle it with care, because while it looks fantastic at large sizes on high-DPI screens, it can become extremely faint or even disappear completely on low-resolution devices at smaller font sizes.

<link href="https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1&display=swap" rel="stylesheet"> <span style="font-family: 'Hepta Slab', serif; font-weight: 1">

Fluid Ranges of Styles

If you look at the variable style slider detail, you’ll see that you can move the slider to each end of the range to discover the minimum and maximum values of the family (in this case, 200 and 700). Replacing the single value “674” with the “..” range syntax for that family (“200..700”) gives you instant access to the entire range:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

Of course, not all designs will take advantage of the complete range of styles, but the real value of variable fonts is the ability to expand the range of your design while reducing the amount of font data transferred. In this case, you would get the entire range of 200-700 in weight for the equivalent of 2 or 3 individual styles—a single 25kb download!

Additional Axes

There are 3 key benefits to variable font technology: to compress, to express, and to finesse. They tend to be realized in that order.

The Google Fonts API has been delivering the compression benefit to end users for a few families (like Oswald and Comfortaa) since early 2019; if a page uses 2 or more styles, and a user has a browser that fully supports variable fonts, then a single variable font file URL is served for all of the weights, while continuing to serve several files for each style to older browsers.

This all happened totally behind the scenes, without any UI changes. Now that Google Fonts has a UI for picking custom weights, you can easily use exactly the weights you want, and as many as you want, while still reaping the compression benefits.

But there’s more to variable fonts than just compression. Other axes either offer more expressive options for display typography, or more ways to fine-tune text typography. These will first become available behind the scenes in the API, and will be described in the specimen pages’ “About this font” descriptions and the API docs. The information available on this site, along with the additional resources, give you entirely new possibilities to expand your design vocabulary.

When thinking about the finesse benefits, have a look at how this site was designed and developed as explained in the About this site section. This highlights some of the ways variable fonts can be used to improve accessibility and the reading experience for more users, in more contexts, on more devices. Each aspect may be small on its own, but taken together, all of these factors dramatically improve the experience as a whole.

To support the broadest set of browsers and devices, it’s important to set up your CSS with standard values first, and the variable styles within an @supports block. If you’re using the Google Fonts API, good news—the API is smart enough to supply the static font files if the browser doesn’t support variable ones, so all you have to do is manage the CSS side of the equation. If you’re hosting the fonts yourself, you just need to add a reference to the variable font family inside the @supports block.

Adding in the font-synthesis: none declaration prevents browsers like Safari or Firefox from artificially bolding or italicizing the font, which can lead to unexpected and less-than-ideal results.

  p {
    font-synthesis: none;
    font-weight: normal;
  }
  strong {
    font-synthesis: none;
    font-weight: bold;
  }
  @supports (font-variation-settings: normal) {
    p {
      font-weight: 350;
    }
    strong {
      font-weight: 575;
    }
  }