A variable font is a single font file that can store a continuous range of font style variations (such as different widths, weights, or sizes).
Variable fonts have new data structures introduced in the 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 | Supported by most of the web browsers Note: Click here to know about the web browsers that support variable fonts. |
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 three or more static fonts used separately within a project can be more than the size of a single variable font having those individual 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 can improve 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.
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 an 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.
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 the design space of the variable font.
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:
Click Sync & Download options icon for the required variable font.
Open the Download options tab.
Select your preferred file format (like CFF or TTF) for download.
Select individual font weights and styles for download or click on Download family to download the entire family.
Installing variable fonts
Mac
Use the following steps to install a font on Mac:
Double-click on the downloaded .zip archive to extract its contents.
You have the following two options for installing a font on the Mac:
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.
Use Font Book, Mac OS’s font management application to install the fonts.
Double-click on the font, and a Font Book window appears.
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.
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:
Right-click on the extracted font files and select Install or Install for All Users.
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:
Click Sync & Download options icon to sync the required variable font.
In Sync to Monotype App tab, select your preferred file format (like CFF or TTF).
Sync individual font weights and styles or click on Sync family to sync the entire family.
Unsyncing variable font
Use the following steps to unsync a synced variable font:
Click Sync & Download options icon for the synced variable font.
In Sync to Monotype App tab, click Unsync.
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