Variable fonts are a technology which enables many variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight or style. The font allows you to change saturation, proportions, contrast, size and animation. Variable fonts were introduced in 2016 in OpenType version 1.8. The technology was developed with the help of Apple, Microsoft, Adobe and Google companies.
If you would like to see how font variation works, play with OpenType Variable Fonts on the Lawrence Pinna website: http://www.axis-praxis.org/. Axis-Praxis website is conceived to demonstrate the capabilities of variable fonts in web browsers. Variable fonts are supported in Chrome v62+ on macOS, Windows and Linux, Safari 11 on macOS 10.13 High Sierra and iOS 11, and Microsoft Edge in the Windows Insider Preview edition of Windows 10 v1709.
Note, Safari on macOS Sierra doesn't support variable fonts. You need to upgrade to the next version of the operating system or run the site in Chrome. The ability to use one file for any number of outlines also allows for saving space. To connect a font with several outlines to the site (normal, light and bold), you need to include at least three files.
In fact, for each style, you need to connect .ttf web font, .woff web font and a compact web font for IE .eot. For each style, the browser downloads a file, which of course affects the time the content is displayed.
With variable fonts, only two files need to be included: .ttf and woff. The browser itself will select the appropriate file for it and download it. The number of server requests is reduced from 3 to 1. As a result, the text on site will appear faster.
CSS4 supports font variations for the font-weight, font-stretch, font-style, font-optical-sizing properties.
As I mentioned above, macOS Sierra in Safari doesn't support this technology, but macOS High Sierra already supports. So everything is great and you can start to deal with them.
Top comments (0)