Variable Fonts on the Web Using CSS

/ Tutorials

Font variations is a new set of features defined as part of the OpenType specification. It allows for font files to contain multiple variation of a font within a single file, called a variable font. This in turns allows the use of one font file on the web that can achieve multiple font styles.

On top of the obvious savings in turns of data that needs to be sent over the wire to display the text on a page, variable fonts enable features such as animating or transitioning font styles and custom font styles, both of which are not possible with static fonts.

Let’s go over some examples of using a variable font, and then break down how to use them on the web today.

Variable Font Examples

Note that you’ll need to use a supporting browser to properly view the examples below.

Source Sans Variable

Source Sans is a popular free font that now comes with in a variable version. And this is achieved using some very simple CSS rules:

				
					@font-face {
  font-family: 'Source Sans';
  src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
  font-weight: 1 999;
}

.source-sans, .source-sans2, .source-sans3 {
  font-family: 'Source Sans';
  transition: font-weight .45s ease-out;
}

.source-sans:hover, .source-sans2:hover {
  font-weight: 999;
}
.source-sans3:hover {
  font-weight: 200;
}

Font Axes

Variable fonts define their variations though axes of variation. There are 5 standard axes:

  • ital: Controls the italics. The value can be set using the font-style CSS property.
  • opsz: Controls the font’s optical size. The value can be set using the font-optical-sizing CSS property.
  • slnt: Controls the slant of the font. The value can be set using the font-style CSS property.
  • wght: Controls the font’s weight. The value can be set using the font-weight CSS property.
  • wdth: Controls the font’s width. The value can be set using the font-stretch CSS property.

Fonts can also specify custom axes, and these need to have a 4-letter uppercase name instead of the 4-letter lowercase names of the standard axes. The Decovar font demoed above is a prime example of a font using a multitude of custom axes.

The standard axes can be set with well-known CSS properties (e.g.: wdth is set with font-weight), and the new CSS font-variation-settings is used to control the values for axes otherwise.

For Example, here we define a style for the variable font:

				
					h1 {
  font-variation-settings: "BASE" 500, "SPAC" 200, "wght" 322, "HEIG" 456;
}

Which could have alternatively been defined like this:

				
					h1 {
  font-weight: 322
  font-variation-settings: "BASE" 500, "SPAC" 200, "HEIG" 456;
}

It’s a good idea to use the native CSS properties for the axes that have one.

Note that fonts don’t have to implement all 5 standard axes, and instead you should consult the documentation of the font to know what axes you can control.

Note also how font-weight can take values anywhere between 1 and 999, compared to the 100-value increments we’re used to.

Using Variable Fonts with @font-face

Using variable fonts on the web involves defining @font-face rules that point to the variable font files. The following is a brief overview of how it’s done, but for there are a few caveats you may want to learn about for cross-browser support.

Here for example we define two version for the Source Sans font family, one regular and one bold. Both versions make use of the same variable font file, but different font files as a fallback for browsers that don’t support variable fonts:

				
					@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSans.woff2') format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSansBold.woff2') format("woff2");
  font-weight: 900;
}

And it can now be used within your CSS rules as usual:

				
					h1 {
  font-family: 'Source Sans';
  font-weight: 900;
}

h2 {
  font-family: 'Source Sans';
  font-weight: 400;
}

You can also specify a range in your @font-face rules, to retain the ability to use all the possible values within your regular CSS rules:

				
					@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSans.woff2') format("woff2");
  font-weight: 1 999;
}

Available Fonts

You can find and play with most of the currently available variable fonts on V-fonts.com. A few notable Open Source ones are Barlow, Mutador Sans, Source Sans, Amstelvar and Cabin VF.

Some are also available through Google Fonts as early access fonts.

TTF to WOFF2

Font files will often be provided in the TrueType format (ttf), but for the web it’s a much better idea to compress the font file to the WOFF2 format, to save on space. You can use a tool like FontTools to compress a font file as WOFF2. More user-friendly GUI or online tools will surely become available really soon.

Browser Support

Support for variable fonts is already pretty good, so in theory you can start using them today. There are a few caveats with support however, and some things are still being ironed-out for their usage within CSS as part of the CSS Fonts Module Level 4. Here’s a nice summary what’s still in flux at the moment.