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:

Operating SystemPre-Defined InstancesAdditional Variations
Windows 10Yes, since version 1709.Only in applications which support variations, see below.
Windows 11Yes.Only in applications which support variations, see below.
MacOS XYes, fully since version 10.13. Some support was added to 10.5 and later.Only in applications which support variations, see below.
LinuxYes, since version 2.8 of Freetype.Only in applications which support variations, see below.

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:

ApplicationPre-Defined InstancesAdditional Variations
Adobe IllustratorYes.Yes, since version 22.
Adobe InDesignYes.Yes, since version 15.
Adobe PhotoshopYes.Yes, since version 19.
Apple PagesYes.No.
Apple KeynoteYes.No.
FigmaYes.Yes, since version 114.4.
Microsoft WordYes, but PDF generation and some printer drivers are currently unreliable.No.
Microsoft PowerpointYes, but PDF generation and some printer drivers are currently unreliable.No.
QuarkXPressYes.No, but it’s in development.

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

ApplicationPre-Defined InstancesAdditional Variations
PDFYes, but the software producing the PDF has to convert the variable font to a legacy format or generate each static instance.Yes, but the software producing the PDF has to convert the variable font to a legacy format or generate each static instance.
Word .docYes, but each static instance is embedded in full, leading to increased file size.No.
Word .docxYes, but each static instance is embedded in full, leading to increased file size.No.

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.

BrowserPre-Defined Instances & Additional Variations
Chrome for AndroidYes, since version 71.
ChromeYes, since version 66.
EdgeYes, since version 17.
FirefoxYes, since version 66.
Internet ExplorerNo.
OperaYes, since version 53.
SafariYes, since version 11.
Safari for iOSYes, since version 11.
UC BrowserYes, since version 13.4.

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:

Font FamilyVariable Font Size (WOFF2 format)Static Font Size (WOFF2 format)Breakeven
Aktiv Grotesk Weight-Axis~509kB~251kB2 Static Fonts
Aktiv Grotesk Weight-Axis and Width-Axis~942kB~251kB4 Static Fonts
Aktiv Grotesk Full Family~1,556kB~251kB7 Static Fonts
Effra Weight-Axis~123kB~56kB3 Static Fonts
Effra Full Family~183kB~56kB4 Static Fonts
Objektiv Weight-Axis~83kB~38kB3 Static Fonts
Objektiv Full Family~145kB~38kB4 Static Fonts
Mokoko Weight-Axis~49kB~22kB3 Static Fonts
Mokoko Full Family~83kB~22kB4 Static 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:

Font FamilyVariable Font Size (TTF format)Static Font Size (TTF format)Breakeven
Aktiv Grotesk Weight-Axis~2,264kB~1,207kB2 Static Fonts
Aktiv Grotesk Weight-Axis and Width-Axis~3,185kB~1,207kB3 Static Fonts
Aktiv Grotesk Full Family~4,578kB~1,207kB4 Static Fonts
Effra Weight-Axis~428kB~198kB2 Static Fonts
Effra Full Family~547kB~198kB3 Static Fonts
Objektiv Weight-Axis~279kB~127kB2 Static Fonts
Objektiv Full Family~405kB~127kB3 Static Fonts
Mokoko Weight-Axis~123kB~60kB2 Static Fonts
Mokoko Full Family~185kB~60kB3 Static Fonts

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

PlatformPre-Defined InstancesAdditional Variations
AndroidYes in system WebView since Chromium version 67.
Yes natively since Android Oreo (API version 26).
Yes in system WebView since Chromium version 67.
Yes natively since Android Oreo (API version 26).
iOSYes since iOS 11.Yes since iOS 11.

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.