Using Variable Fonts

Operating System Compatibility

Mainstream Operating Systems introduced or updated since 2016 all have support for, at least, the pre-defined instances – usually the font family’s existing weights – in a variable font file:

We provide multiple versions of some of our variable font families, which support different combinations of design axes (e.g. Light to Bold, Narrow to Extended, Italic or Upright). This gives users and developers the flexibility to select the smallest file which meets their design needs.

When you’re installing variable font files, take care to not install files which conflict with each other. For example, “Mokoko Full Family Variable Font” contains the entirety of “Mokoko Upright, Weight-Axis Variable Font”, so these two variable fonts would conflict with each other, giving unpredictable and unreliable behaviour.

Application Compatibility

Application support for the pre-defined instances in a variable font, as if they were just a collection of individual font weights, is generally excellent, with support for accessing additional variations actively growing:

However, embedding variable fonts in document files is not quite as straightforward:

Variable Fonts on the Web

End-users can rely on the web developer and their web browser to take care of the technical details under the hood; the information below is intended for web developers who wish to use self-hosted web fonts on their site.

You can take advantage of the smaller file size that variable fonts offer to deliver more fonts in less time to every site visitor. Below is a comparison of the file sizes for the web font versions of three of our library font families which are available as variable fonts:

Support for variable fonts on the web has reached over 95% of users, and you can use them in combination with fallback static fonts without hacks or tricks. The CSS rules to achieve this are straightforward:

@font-face {
  font-family: 'Mokoko VF';
  src: url('Mokoko_VF.woff2') format('woff2-variations');
  font-weight: 100 900;
}

@font-face {
  font-family: 'Mokoko';
  src: url('Mokoko_Rg.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Mokoko';
  src: url('Mokoko_Bd.woff2') format('woff2');
  font-weight: 700;
}

body {
  font-family: 'Mokoko VF', 'Mokoko', sans-serif;
}

Variable Fonts in Apps

End-users can rely on their mobile platform to take care of the technical details under the hood; the information below is intended for software developers who wish to embed fonts in their apps.

You can take advantage of the smaller file size that variable fonts offer to deliver more fonts in less time to each user who downloads your app. Below is a comparison of the file sizes for the app versions of three of our library font families which now feature variable fonts:

Support for variable fonts in apps is excellent across both major mobile platforms:

Since the creation of OpenType it has existed in two distinct flavours, TrueType-based OpenType and CFF-based OpenType. The introduction of variable fonts has added a third flavour, CFF2-based OpenType.

CFF2-based variable fonts are not backwards compatible with CFF-based static fonts, and do not have widespread support. The variable font compatibility information provided in this document refers only to TrueType-based OpenType.

We recommend that only TrueType-based variable fonts are used, and it is the only format of variable font which we supply to end-users.

External Resources

“Can I Use?” is a great resource for accurate and up-to-date information on web browser compatibility and standards compliance. Their variable fonts summary shows how much progress has been made and how reliable variable fonts have become on the web.