Posted 18 April, 2017
A few days after the TYPO Labs conference in Berlin it seems like a good idea to summarize the current capabilities of the major browsers in handling variable fonts.
There’s plenty of good news: four major desktop browsers now support variable fonts. That is: in MacOS, development versions of Safari, Chrome and Firefox work well; on Windows, the current release of Edge on Windows works in certain ways. Chrome is already showing substantial cross-platform capability, with variable fonts working in Windows, Linux and Android as well as MacOS. Mobile support in Android is exciting since it demonstrates the compression benefits of variable fonts on low bandwidth devices.
The other good news to report is that CSS to control the fonts is stabilizing, and evolving beyond the low-level CSS property, font-variation-settings towards implementation in font-weight, font-stretch, font-optical-size and even (in Safari) automatically along the opsz axis according to font-size. Below you’ll find a summary of how to use the various CSS properties.
However, while fonts can now be tested in Axis-Praxis and elsewhere, and impressive web demos can be built, there’s still significant work to be done. The Mac browsers’ support needs to progress to release versions in default configurations. Apple has yet to show a variable Safari on iOS. Firefox lags behind Chrome outside of MacOS. Microsoft Edge needs to handle variations fully, not just via Named Instances on installed fonts. CFF2-flavoured variable fonts are not known to work on any browser.
N.B. If you try some of these browsers, be sure to read the How to Play configuration notes below. Not all work out of the box.
Summary: Given Apple’s control of the MacOS CoreText framework that supports variable fonts, it wasn’t surprising that Safari would be the first browser to support variable fonts. It was on September 30, 2016, two weeks after the OpenType 1.8 announcement at ATypI, that support for the new CSS (font-variation-settings) was added to the WebKit Nightly browser, as lead developer Myles Maxfield announced on his blog. WebKit Nightly is the development version of Safari that is updated almost every day with new features and bug fixes — it is not recommended for normal use, as it contains experimental and unstable code. The more stable development version is Safari Technology Preview, which became variable-aware in Release 15 of October 12, 2016.
How to play:
Lead developer for variations: Myles Maxfield
CSS:
font-variation-settingsfont-weight (controlling the wght axis)font-stretch (controlling the wdth axis)font-style (slnt and ital but still buggy)font-optical-sizeChannel for bug reporting: WebKit Bugzilla
Limitations: Does not handle GSUB/GPOS FeatureVariations table.
Variable font system: MacOS CoreText
Variation support in release version: NO
Dominik Röttsches of Google presented an excellent update of progress in Chrome on all its platforms at TYPO Labs on April 8, 2017. Watch the video here or here.
Summary (Mac): Variation support was initially added to Chrome Canary, the development version of Chrome, on December 22, 2016. Activating support is via a chrome://flags setting (see below). As in Safari, control is via CSS font-variation-settings. Presumably there was some bug-fixing to be done, and it took until February 2017 for the support to become widely known. (As of April 2017, regular Chrome on MacOS also handles font variations with the switch in chrome://flags, but Chrome developers do not recommend testing variations with anything other than Chrome Canary.)
Summary (Linux): Support on Linux seems to have been added at the same time as on Mac via the open-source FreeType library — again this is in the developer build.
Summary (Windows): Chrome Canary in Windows also supports variations, and this is also via FreeType rather than Windows’ native DirectWrite system. A significant aspect of Chrome having a Windows build that does not rely on the latest DirectWrite library is that Windows 7, 8.x and 10 (any version) can handle variable fonts via Chrome. Note that, for the time being, Chrome is not a good way to test ClearType hinting in variable fonts: it renders with greyscale.
Summary (Android): Chrome having a Linux build makes it relatively easy to build for Android, the widely used Linux-based platform that powers 82% of all mobile phones. Axis-Praxis tested Chrome/Android on a Nexus 7 running Android 6.0.1, and can report that it works. This is great news in terms of a practical demonstration of what is for many the most important factor of variable fonts, their reduced size benefit to low-bandwidth devices.
How to play:
Lead developer for variations: Dominik Röttsches
Channel for bug reporting: bugs.chromium.org
CSS:
font-variation-settingsLimitations: None known on MacOS; other platforms not widely tested.
Variable font system: MacOS CoreText; FreeType on Linux, Windows and Android
Variation support in release edition: NO
Summary: Firefox’s support for variable fonts was limited for some time to the system fonts Skia and San Francisco. In February 2017, more configuration settings were added, allowing downloadable variable fonts to work. Support is in both Firefox Developer Edition and Firefox Nightly, the frequently updated but less stable version.
How to play:
layout.css.font-variations.enabled to true.gfx.downloadable_fonts.keep_variation_tables to true.gfx.downloadable_fonts.otl_validation to false.Lead developer for variations: Jonathan Kew
Channel for bug reporting: Bugzilla@Mozilla
CSS:
font-variation-settingsLimitations: Does not handle GSUB/GPOS FeatureVariations table.
Variable font system: MacOS CoreText
Variation support in release edition: NO
Thanks to Roel Nieskens for help with this section. (Roel’s using variable fonts in Edge probably more than anyone outside Microsoft!)
Summary: Variable font support in Edge is coming, demonstrating that Microsoft’s implementation of font variations in DirectWrite is progressing well. However there are major limitations, the biggest being that @font-face webfonts are not yet supported. Improvements in Edge are delivered via Windows updates. Variable support was first implemented in Windows 10 Anniversary Update. Several enhancements were added in Windows 10 Creators Update of April 11, 2017, including the ability to work with custom axes, not just width and weight — yet still only the Named Instances work. Keep an eye on Microsoft Edge Platform Status: Font Variation Properties for further updates. Roel adds: “variable color fonts are a possibility now, for better or worse!”
How to play:
font-family.font-weight and font-stretch with numbers that select from the Named Instances.font-family: MyFont NamedInstance1;.Lead developer for variations: Sergey Malkin
Channel for bug reporting: EdgeHTML issue tracker and Twitter @MSEdgeDev
CSS:
font-weightfont-stretchLimitations: No support for @font-face webfonts so fonts need to be installed locally. Accesses only Named Instances rather than the whole variation range of each axis. CSS4 enhancements for variable fonts are not yet supported. Printing does not work.
Variable font system: DirectWrite
Variation support in release edition: YES
font-variation-settings provides a low-level way to select positions on any of the variation axes in the font. Each axis is specified by its 4-character axis tag, e.g. 'wght' (in quotes) followed by its value as a floating point number. Multiple settings are separated with commas. To date this is the way that almost all demonstrations of variable fonts in browsers have been implemented, including Axis-Praxis. The numeric values for each axis can be animated via CSS animations, thus a Bold toggle can animate text between regular and bold without any code.
Note: The latest versions of WebKit Nightly use the font size (measured in pt) to determine a setting on the opsz axis, if the font has one.
CSS offers the @supports at-rule to query whether a browser supports a particular feature. This can be used to write CSS that handles both variable and non-variable browsers. The not operator is useful to invoke declarations when variable support is not present. The string within the parentheses is any valid settings property, and does not relate to any fonts called for in the CSS.
The following CSS shows CSS calling for a variable font when if browser can handle it, and calling for a static font – from a hypothetical font instance server – if it cannot.
@supports(font-variation-settings: 'wght' 700) {
@font-face {
font-family: Gingham;
src: url("webfonts/Gingham.ttf");
}
}
@supports not(font-variation-settings: 'wght' 700) {
@font-face {
font-family: Gingham;
src: url("servefont?name=Gingham&variation=wght|301|wdth|150");
}
}JavaScript offers the function CSS.supports() to test if a browser supports a certain CSS feature. It returns a boolean value. The arguments do not refer to any particular font, so you can put any valid settings as the second argument.
CSS.supports ("font-variation-settings", "'wght' 700")
Note that Edge does not support font-variation-settings so this is not a good way to test for a variable-capable version of Edge.
Many thanks to Roel Nieskens, Peter Constable, Dominik Röttsches and Adam Twardoch for their comments on this piece before publication.
Edit 2017-04-19: The Mac browsers’ support needs to progress to release versions. The Mac browsers’ support needs to progress to release versions in default configurations.
Edit 2017-04-19: Added: “(As of April 2017, regular Chrome on MacOS also handles font variations with the switch in chrome://flags, but Chrome developers do not recommend testing variations with anything other than Chrome Canary.)”
Edit 2017-04-19: Added section about the CSS @supports at-rule.
Edit 2017-04-19: Does not handle GSUB FeatureVariations table. Does not handle GSUB/GPOS FeatureVariations table.
Edit 2017-04-21: Mentioned Dominik Röttsches’ talk about Chrome at TYPO Labs and linked to the video.
Your browser appears to be incompatible with variable fonts.
To get started with variable fonts, install the latest version of Google Chrome. On a Mac running macOS 10.13 High Sierra, you can also use Safari.