How to get variable fonts working in Safari, Chrome and Firefox (MacOS)

Posted 5 April, 2017

Here is a quick reminder of how to make variable fonts work in all three of the main Mac browsers: Safari, Chrome and Firefox.

This is an ultra-condensed version of a piece that I’ll post after the TYPO Labs conference. The major browser vendors will update us there on progress, and let us know what’s happening with variable fonts on Windows, Linux and Android. UPDATE: Here is the longer piece.

Safari

UPDATE 2017-09-25 Variable fonts are supported fully in Safari 11 when running on macOS 10.13 High Sierra and on iOS 11. In other words, with an up-to-date Mac or iOS device, variable fonts work well in Safari.

UPDATE 2017-06-28 Support for variable fonts has been removed from preview versions of Safari (Safari Technology Preview and WebKit Nightly) when running current macOS 10.12 Sierra. These browsers work fine with the Public Beta of macOS 10.13 High Sierra, which is available under the Apple Beta Software Program. Variable font support is planned to be on by default in macOS 10.13.

• Download Safari Technology Preview (recommended) OR WebKit Nightly.

Chrome

UPDATE 2017-09-20 Variable fonts now work in Chrome v62 Beta without further configuration. Release scheduled for October 17.

• Download Chrome Beta.

UPDATE 2017-09-10 From early August 2017, variable fonts work in Chrome Canary without further configuration.

• Download Chrome Canary.
• Go to the URL chrome://flags
• Enable “Experimental Web Platform Features”

Firefox

• Download Firefox Developer Edition (recommended) OR Firefox Nightly.
• Go to the URL about:config
• Set layout.css.font-variations.enabled to true.
• Set gfx.downloadable_fonts.keep_variation_tables to true.
• Set gfx.downloadable_fonts.otl_validation to false.