Skip to main content
Variable fonts

Learn about variable fonts, Monotype’s variable fonts, and how to use them in your project

Supriya Bisht avatar
Written by Supriya Bisht
Updated over a week ago

A variable font is a single font file that can store a continuous range of font style variations (with different width, weight, or size).

Variable fonts have new data structures introduced in OpenType 1.8 specification. These data structures can allow compact packaging of two or more styles of a font family in a single font file.

A variable font contains a single set of outlines, from which almost unlimited instances can be derived by data sets. This is done by defining a set of outline variations within the font, which constitute a single or multiple axis design space within which many font instances can be interpolated.

Use Only show variable fonts option of Variable fonts from the Filters section in Browse>Fonts page of Monotype Fonts to view the variable fonts.

Note: All the variable fonts available on Monotype Fonts are labelled as


Difference between static fonts and variable fonts

You can understand the difference between static fonts and variable fonts from the below table:

Static font

Variable font

Definition

Fonts that have fixed styles and require a different file for each variation.

Fonts that enables many different variations of a typeface to be stored in a single file.

Different file for each variation

Yes

No.

Improves website performance

No

Yes

Offers design flexibility

No

Yes

Supports CSS transitions

No

Yes

Compression

No

Yes

Responsive typography

No

Yes

Ease of distribution

No

Yes

Accessible typography

No

Yes

Number of included styles

Single

more than one

Browser support

Yes

Not supported by all web browsers

Availability of dynamic text effects

No

Yes


Benefits of variable fonts

There are many benefits of using variable fonts, such as:

  • Compression

    A variable font's size is smaller than the collective size of fonts representing the same discrete style range in the variable font. For example, the collective size of two static fonts used separately within a project will be more than the size of a single variable font having those two fonts. The more styles you add to a variable font, the greater the savings.

  • Improves web performance

    A website can load a single variable font file and adjust the variations if required. This improves the loading speed and performance of the website.

  • Ease of distribution

  • Dynamic text effects

    Variable fonts can be animated using CSS animations or transitions and you can create dynamic text effects that change the weight, width, slant, or other attributes of the font over time.

  • Greater variability

    You can package a wide range of styles into a single font file. The OpenType 1.9 specification defines tags for five specific axes:

    • Weight

    • Width

    • Optical Sizes

    • Italic (versus Roman)

    • Slant (versus Roman)

    However, the OpenType font specification lets us build any variation we can imagine and draw through private user-defined axes.

    Monotype has many families that are designed to include a range of weights or widths. For example, Helvetica Now, Cotford, Kairos Sans, and Futura Now.

  • Responsive typography

    Variable fonts offer responsive typography and application tuning. Adjusting weight, contrast or other variables to optimize readability on a specific device. It is like Edge tuning; except we can apply the tuning in a more targeted fashion than a filter that affects both X & Y in the same way.

    Note: In typography, edge tuning refers to the process of fine-tuning (adjusting) the spacing, curves, and angles of a letterform to achieve optimal legibility and visual harmony.

  • Offers creative efficiency

    Variable fonts are flexible, efficient, and have creative potential. This makes them a powerful resource for creative designers.

  • Accessible typography

    It is possible to provide better experience with the possible variations in variable fonts that can adapt to the readers and their environment.


Limitations of variable fonts

A variable font may have the following limitations depending upon its use case:

  • A variable font is a compressed form of more than one style. However, if you are only interested in using two or three weights from a huge variable family then you may lose the size savings. So, while variable fonts can reduce file size, they can also increase it if they use many variations that are not required.

  • All fonts are not available in the variable format.

    Newer font data is typically drawn as interpolatable and can be easily developed as a variable font. Older fonts drawn separately as static designs may have greater structural variability across an axis and are not easily built as interpolatable font.

    For example, Times New Roman is a poor subject, as the changes in the directionality of the stress, and changes in the shape and alignment of serifs in the lowercase, make for odd interpolations.

    There are a handful of font families in the world where an Upright is drawn as interpolatable with its corresponding Italic. And there are many Obliqued or Slanted fonts that might work but are these variability between the extremes adds value for customers.

  • All browsers do not support variable fonts.

    Refer to browser support for details.

  • Adjusting the variations of a font within the variable font file can be complex and requires a good understanding of CSS and font design.


Browser support for variable fonts

Our WOFF and WOFF2 font files are supported by all modern browsers. Different browsers or browser versions can support different formats.

WOFF Browser Support

  • Internet Explorer 9+

  • Edge 12+

  • Firefox 3.6+

  • Chrome 5+

  • Safari 5.1+

  • Opera 11.5+

  • iOS Safari 5+

  • Android 4.4+

  • Blackberry 7+

  • Opera Mobile 12+

  • Chrome Android 70+

  • Firefox Android 63+

  • Internet Explorer Mobile 10+

  • UC for Android 11.8+

  • Samsung Internet 4+

  • QQ 1.2+

  • Baidu 7.12+

WOFF2 Browser Support

  • Edge 14+

  • Firefox 39+

  • Chrome 36+

  • Safari 12+

  • Opera 23+

  • iOS Safari 10+

  • Android 67+

  • Opera Mobile 46+

  • Chrome Android 70+

  • Firefox Android 63+

  • Samsung Internet 4+

  • QQ 1.2+

  • Baidu 7.12+



Downloading variable fonts

Note: Select enterprise users can download font files.

No download available on 30 days trial. Contact [email protected] for any queries.

Use the following steps to download variable fonts from Monotype Fonts platform:

  1. Click Sync & Download options icon for the required variable font.

  2. Open the Download options tab.

  3. Select your preferred file format (like CFF or TTF) for download.

  4. Select individual font weights and styles for download or click on Download family to download the entire family.

A screenshot of a computer

Description automatically generated


Installing variable fonts

Mac

Use the following steps to install a font on Mac:

  1. Double-click on the downloaded .zip archive to extract its contents.

  2. You have the following two options for installing a font on the Mac:

  3. To activate a font, drag the font files into the Fonts folder located inside the Library folder: Macintosh HD/Library/Fonts. You can also use the shortcut Cmd+Shift+G.

  4. Use Font Book, Mac OS’s font management application to install the fonts.

  5. Double-click on the font, and a Font Book window appears.

  6. Click Install Fonts to install the fonts.

    Refer to the support section of the Apple website. http://support.apple.com/kb/HT2509 for more information.

  7. To access your newly installed fonts, restart any applications in use.

Windows

Windows XP or later:

Right-click the .zip archive and select Extract All. This will create a new folder containing your fonts in the location of your choice.

Any other version of Windows:

Go to Local Disk (C:) › Windows › Fonts. Locate the folder you’ve expanded from the downloaded .zip file and drag the font files into the Fonts folder.

Windows 7 and later:

  1. Right-click on the extracted font files and select Install or Install for All Users.

  2. To access the newly installed fonts, restart any applications in use.


Syncing variable font

Font syncing involves transferring fonts from the browser dashboard to the Monotype Desktop App.

Fonts and font families synced to the Monotype Desktop App are automatically accessible in most creative applications. There’s no need for users to download individual font files.

Syncing is the primary method of accessing fonts through Monotype Fonts.

Use the following steps to sync variable font to Monotype Desktop App:

  1. Click Sync & Download options icon to sync the required variable font.

  2. In Sync to Monotype App tab, select your preferred file format (like CFF or TTF).

  3. Sync individual font weights and styles or click on Sync family to sync the entire family.

A screenshot of a computer

Description automatically generated


Unsyncing variable font

Use the following steps to unsync a synced variable font:

  1. Click Sync & Download options icon for the synced variable font.

  2. In Sync to Monotype App tab, click Unsync.

A screenshot of a computer

Description automatically generated


Using variable fonts

Commercially available variable fonts are currently produced in the TTF format. It is possible to request a set of matching static fonts for your variable font order. They can be installed simultaneously with the variable font.

Variable fonts might be most useful to web and design teams. They offer an overall file size savings in comparison to static families. This is particularly relevant for web applications. The savings in file size depend on the design and number of styles. In general, they are proportional to the number of styles in the family. Variable fonts also offer more flexibility for the UI design team.


Suggested Reading

Did this answer your question?