Variable fonts are already widely supported among web browsers. The implementation is similar to conventional webfonts. But the format declaration should contain an added “-variations”, for example:

src: 'font.woff2' format('woff2-variations');
src: 'font.ttf' format('truetype-variations');
src: 'font.otf' format('opentype-variations');

Otherwise the fonts can be linked as conventional webfonts. 

@font-face {
  font-family: 'MyFontName';
  src: url('myfont.woff2') format('woff2-variations');
}
html {
  font-family: 'MyFontName', Arial, sans-serif;
}

Understanding variable font axes

There are registered and custom design axes. A variable font will contain at least one axis, but can contain any number and any combination of registered and custom axes. Before using a variable font, it is important to know which axes are included in the font and it is also important to know the behavior of the registered axes, since they can be mapped to existing CSS attributes. 

Registered axes use a lowercase tag (like wght), custom axes use uppercase (like CUST). 

The range of values can be set in the font and might be narrowed down further through the @font-face declaration. A typical range of integer values for a seamless design change goes from 1 to 1000. But the range might also be connected to a degree value (like –90 to +90), a font size (like 6 to 72) or even be limited to a boolean value (0/1).  

So before writing the CSS to implement a variable font, it is important to look up which axes are included in a font and what the minimum and maximum values are. Otherwise one will likely try to access values which are out of range. Variable fonts can be tested through a local installation on a desktop computer or on the fly through online services like these:

• https://www.axis-praxis.org 
• https://wakamaifondue.com

Working with registered axes: Weight

The weight axis uses the tag “wght” and maps to the font-weight descriptor. Typically, any value from 1 to 1000 is supported and the entire range or a subset of it should be set in the @font-face declaration. 

@font-face {
  font-family: 'MyFontName';
  src: url('myfont.woff2') format('woff2-variations');
  font-weight: 300 700;
}

And to use a font instance from that range:

.myclass { 
font-family: 'MyFontName';
font-variation-settings: 'wght' 400;
}

Alternatively or in addition, you can also set the value through font-weight. For variable fonts, the same range of 1 to 1000 is now allowed. 

.myclass { 
font-family: 'MyFontName';
font-weight: 400;
}

Working with registered axes: Width

The width axis uses the tag “wdth” and maps to “font-stretch”. The setting usually represents a percentage value from the default 100, however not all fonts actually have the normal width at the value of 100. 

@font-face {
  font-family: 'MyFontName';
  src: url('myfont.woff2') format('woff2-variations');
  font-stretch: 85% 100%;
}

And to use a font instance from that range:

.myclass { 
font-family: 'MyFontName';
font-variation-settings: 'wdth' 95;
}

Alternatively or in addition, you can also set the value through font-stretch. 

.myclass { 
font-family: 'MyFontName';
font-stretch: 95;
}

Working with registered axes: Italic

The italic axis uses the tag “ital”. It can be a special case since it doesn’t necessarily offer a range of values like the other axes. Instead it can act as a toggle to turn cursive letterforms on and off. This is necessary, since cursive letterforms are often vastly different from upright letterforms, which means they cannot be created in a compatible way to allow for a seamless transition. Typically the axis only uses a range from “0” (upright) to “1” (italic) with or without a seamless change of the stem slant.  

.myclass { 
font-style: italic;
font-variation-settings: 'ital' 1;
}

Note: The italic styles of a font (family) aren’t necessarily put in one font with the upright designs. Type designers can (and often will) choose to offer two variable fonts instead: one for upright, one for italics. 

 

Working with registered axes: Slant

The slant axis uses the tag “slnt”. Its values represent a positive or negative degree of slant, e.g. going from 0 (upright) to 15 or from –15 to 0 (upright). 

.myclass { 
font-family: 'MyFontName';
font-variation-settings: 'slnt' 12;
}

Working with registered axes: Optical Size

The optical size axis uses the tag “opsz”.  Its purpose is to allow type designers to provide different designs based on the relative size of the text display. For example: for a small text, hairlines would be avoided, but they might be used for larger headlines. The axis value relates to the font size and is usually set automatically by the browser. Font-optical-sizing toggles this behavior. 

.class1 { 
font-optical-sizing: auto;
}
.class2 { 
font-optical-sizing: none;
}

If setting a specific value is required:

.myclass {
  font-variation-settings: 'opsz' 48;
}

Working with custom and multiple axes

To set a custom axis, the tag is set in uppercase. 

.myclass {
  font-variation-settings: 'CUST' 500;
}

To set multiple axes, a comma-separated list is used.

.myclass {
  font-variation-settings: 'wght' 400, 'slnt' 12, 'CUST' 550;
}

Putting it all together and providing a fallback solution

Since fonts usually contain multiple axes, a more complete @font-face declaration (in this case setting weight, width and slant) might look like this:

@font-face {
 font-family: 'MyFontName';
 src: 'myfont.woff2' format('woff2-variations');
 font-weight: 50 950;
 font-stretch: 70% 130%;
 font-style: oblique 0deg 20deg;
}

Variable font support can be checked with CSS feature queries and this allows a fallback solution for browsers without a support for variable fonts. 

html {
  font-family: Arial, sans-serif;
   font-weight: 400;
}
@supports (font-variation-settings: 'wght' 400) {
  html {
    font-family: 'MyFontName', Arial, sans-serif;
    font-variation-settings: "wght" 400;
  }
}

Using variable fonts dynamically

The axes in a variable font give web designers a huge design space of font styles to work with. Picking the values of the axes can also happen dynamically—may it be through a CSS keyframe animation or by responding to user input or other values on the client’s side. Variable fonts can easily be based on the viewport size for example and experimental uses have been built which react to sound, the user’s face in a web cam and so on. You can check out these demos by Mandy Michael to explore some of the possibilities.