Variable Fonts Browser Support

[00:00:00]
>> Jason Pamental: As far as support goes, it's actually quite good already. It's already baked into iOS [COUGH], so that means that it's supported in Safari, and any other browser that you use on iOS, because that's Apple, they'll force you to use web kits, rendering engine, it works in Safari, it works in Chrome, on Mac, and Windows.

[00:00:23]
It has for, well, since November, I think, so it's going on three quarters of the year, it launched in Edge about a month and a half ago, and it's in the development version in Firefox. You can actually turn it on in the shipping version with a flag, it's on by default in Nightly Build.

[00:00:40]
They're hoping to ship full support in August with Firefox 62, I've been doing a lot of work with the Firefox team. Jen Simmons is a developer and designer evangelist there. She's been really leading the charge and support variable funds, and they've been really amazing at kind of giving me an inside look at what they're working on, getting feedback on the tools, and showing us what kind of things they're doing.

[00:01:08]
So it's really coming along well, it's in an operating system level support in both High Sierra and Windows 10. In the currently shipping, well, the last two versions of Windows 10, since last fall, it's been supported. And you can access all the sliders for variable fonts in the current versions of Illustrator and Photoshop.

[00:01:29]
Now, there's another aspect to these fonts that's important to point out, that there is this notion of named instances. So when we're used to thinking about a typeface, and there's Bold, there's Light, there's Italic, there's Bold Condensed. Those were previously separate files, now, they're points along these axis.

[00:01:54]
They're shortcuts within this one file for us to access by this named instance. This is what Bold Condensed looks like in the eyes of the person who designed it. And that will translate to this width value, that weight value, whatever other axis are present. Those are accessible now, in other applications on the desktop.

[00:02:16]
So if you open up Keynote, if you open up Pages, if you open up any application that is working in High Sierra, or on Windows 10, you should see, be able to select a variable font, and have access to any named instances that are in there. The unfortunate thing is those named instances are not accessible in CSS.

[00:02:38]
But they are accessible in Firefox's DevTools, so we'll take a look at that, and see how you can then find the values, and bring those values back into your CSS. So after only a year and a half, we'll have, within a couple months, support in almost every shipping browser.

[00:02:58]
I think the UC browser and the Samsung ones still have not figured it out, but the core Android browser does have support for variable fonts, as well. In general, what happens with a browser that's less than two years old, it will probably still display the variable font, just in its normal state, it won't vary.

[00:03:22]
So it will still work, you can also use @support, so feature detection in your CSS, and test for support, and provide some fall back. I can show you the work in progress from my own website. I took my existing site, and then I created an extra chunk in the style sheet inside and @support's block, and then, adding all the variable fun stuff there.

[00:03:45]
So if you have a preexisting design system, you don't have to disturb it. You can add in this sort of tightly scoped chunk of CSS that will replace the core typography with the variable font stuff. And because of, what I mentioned earlier, all the CSS has to be processed before it starts to render the page, you can prevent the browser from downloading both the non-variable and variable fonts.

[00:04:11]
Just by nature of specifying it the right way, and that @supports block. So as long as you then cover all of your declarations for font family in your variable font CSS, then, you won't end up with a double download penalty for the end user.