Variable Fonts in CSS

6 min readFeb 5, 2024

I recently came across CSS Variable fonts, and I find them interesting. In this blog article, we will look at what they are, their benefits, and how to use them in your web app.

Variable Fonts

Variable fonts are a new font specification that can significantly reduce font file sizes. They are an evolution of the OpenType font specification that allows many different variations of a typeface to be incorporated into a single file.

ℹ️ OpenType is a format for scalable computer fonts and are used commonly on major computer platforms such as Linux, MacOS, and Windows.

Static Fonts (Before Variable Fonts)

Using variable fonts comes with a lot of benefits. To understand these benefits, let’s revisit how typography works on the web traditionally.

Before variable fonts, each style was implemented as a separate font file. So you will have separate files for ‘Inter Regular’, ‘Inter Bold’, and ‘Inter Regular Italic’. This means you can end up with 10 or 20 different font files to represent a complete typeface.

ℹ️ The terms font and typeface are used interchangeably. The difference between a font and a typeface is that the former exists as part of the latter. A typeface refers to the overall set or family of font styles whiles font refers to a particular style of glyph or character within a typeface.

For a typical website, we will need at least four files: regular, italic, bold, and bold italic to use a typeface. If we want more weights like lighter, or extra bold, that will mean several more files.

Shortfall of Static Fonts:

Implementing more styles of a typeface means several more files. This results in more HTTP requests, and more data being downloaded which increases latency and page rendering time.
Using static fonts in designing sites for the web limits both designers and developers because they don’t have the luxury of using the number of typeface styles they like to make reading on the web more delightful for users as we see in print magazines. Only including the Regular and Bold styles, plus their italic counterparts, can amount to 500KB or more of font data. Since you’d have to load a new font file for every style(or combination of styles), many web developers choose not to use these capabilities, reducing the experience of users.

Benefits of Using Variable Fonts

You have all the style permutations contained in a single file.
A smaller file size. Even though a variable font file will be larger than a single font, most cases will be smaller or about the same size as the 4 you might load for a body copy. The advantage here is that you have access to the range of weights, widths, and styles available, rather than being constrained to only the few that you previously would have loaded separately.

Implement Variable Fonts

There are a couple of different ways you can put variable fonts to work in your project today. You can:

Use the Google Fonts API(as of v2)
Hosting them yourself with @font-face (if you have the font files and license if required)

In this blog article, we will focus on learning how to implement variable font with the CSS @font-face .

ℹ️ Did you know you can browse for just variable fonts using the “Show only variable fonts” checkbox on Google fonts?

Hosting Variable Fonts

Hosting variable fonts on your site is not much different than hosting standard ones(static fonts). But there are a few key parts that must be included for them to work best.

Variable fonts have been through several iterations, the example below shows the most current and complete implementation to ensure the broadest compatibility.

@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;
}

Explanation of the code above.

Source property: For the src property, we provide two formats. This is to ensure that it works now and in the future, once the full specification is supported in all browsers.

The first syntax url('') format('woff2 supports variations') is the more modern of the two. The second syntax url('') format('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.

Ranges for font-stretch, font-style, and font-weight : Setting a range of values for properties like font-stretch , font-weight , and font-style 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-stretch: supplied as two percentage values: first low, then high. Example: font-strech: [low]% [high]%;
font-style: currently, this property should only be specified for variable fonts in two scenarios:

If you’re loading an italic-only font file: font-style: italic;
If you’re loading a font with a slant axis: font-style: oblique 0deg 10deg;

Note: For files that contain both italic and slant axes, it is best to omit the font-style line completely.

font-weight: supplied as low and high values: font-weight: 100 1000;
font-display: while this property is not required, it is good practice to include it to get content on screen as fast as possible.

After declaring the rules for @font-face , you can go about specifying the font-family and other CSS font attributes just as you would if using any other method of loading fonts.

Before wrapping up, let’s look at one important concept called “Variation Axes” and how to use this modern syntax in older browsers.

Variation Axes

There are five(5) registered axes for controlling the features of a font: weight, width, optical size, slant, and italics. The five registered axes have 4-character lowercase tags that are used to set their values in CSS:

Weight — wght : The weight axes describe how light or how bold the letterforms can be. Weight might range from 1–999.

font-weight: 375;
font-variation-settings: "wght" 375;

Width — wdth : The width axes describe how narrow or how wide a font can be.

font-stretch: 115%;
font-variation-settings: "wdth" 115; /* The % symbol is not used when utilizing font-variation-settings */

Italic — ital : The italic axes describe if italic letterforms are present and can be turned on or off accordingly. Italic is set as either 0 or 1(off or on).

font-style: italic;
font-variation-settings: "ital" 1;
/* font-synthesis: none; will prevent browsers from accidentally applying 
the variation axis and a synthesized italic. 
This can be used to prevent faux-bolding as well. */
font-synthesis: none;

Slant — slnt : The slant axes are often referred to as ‘oblique’ and are different from true italics. The allowed range is generally 0 (upright) to 20 degrees. Any number along these values can be supplied so that the font can be slanted a bit. Also, values ranging from -90 to 90 degrees are valid.

font-style: oblique 14deg;
font-variation-settings: "slnt" 14; /* The deg keyword is not used when utilizing font-variation-settings. */

Optical Size — ital : Optical sizing refers to the practice of varying the overall stroke thickness of letterforms based on physical size. There is a new attribute, font-optical-sizing created to support variable fonts in CSS. The only values allowed are auto or none . Hence this attribute only allows for turning optical size on or off.

font-optical-sizing: auto;
font-variation-settings: "opsz" 36;

The Font Variation Settings Property:

I am sure you will be wondering what the font-variation-settings property is. Well, the font-variation-settings property is a lower-level syntax that allows you to specify custom variations for variable fonts. font-variation-settings was the first mechanism implemented to test the early implementations of variable font support. Therefore wherever possible, the appropriate property should be used( font-stretch , font-style , font-weight , etc.) and rely on font-variation-settings as a fallback.

Next Steps:

Variable fonts are well-supported and ready to use in production. Hence if you want to use variable fonts in your project visit Google Fonts.

That will be all for today. I hope you enjoyed this blog article and also found it useful.

Did you know you can browse for just variable fonts using the “Show only variable fonts” checkbox on Google Fonts?

Acknowledgments

I would suggest the following resources for additional information about Variable Fonts, which I found very helpful.