Variable Fonts on the Web Using CSS

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. Hover over the text to see how the value for font-weight can be transitioned:

See the Pen XWdaGLZ by alligatorio (@alligatorio) on CodePen.

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

---

Custom font styles

Here are some examples all using the same font, Decovar, a variable font that defines custom axes and allows for unique and stylized text:

See the Pen RwaZdXX by alligatorio (@alligatorio) on CodePen.

And here’s the CSS rules used for that:

@font-face {
  font-family: Decovar;
  src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
}

.decovar, .decovar2, .decovar3 {
  font-family: Decovar;
}

.decovar {
  color: var(--green3);
  font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
}
.decovar2 {
  color: hotpink;
  font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
}
.decovar3 {
  color: rebeccapurple;
  font-variation-settings: "TRMF" 159.18, "TRME" 1000;
}

---

Now that you’ve seen some real-life examples, let’s go over some of the concepts and how to make use of variable fonts in your own web pages.

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 NobotoFlex 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.

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

With the above, we can now use any value between 1 and 999 for the font-weight property. Non-supporting browsers will use a font-weight value of normal.

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.

Resources and Tools

Here’s some further reading material if you want to expand your understanding of using variable fonts on the web:

• Get started with variable fonts by Richard Rutter
• Introduction to variable fonts on the web
• One File, Many Options: Using Variable Fonts on the Web

And here are two tools that allow you to easily test out and find variable fonts:

• Axis-Praxis
• V-Fonts.com