FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.6 Browser Support

Browser support is coming along fast for variable fonts, but it’s not quite at 100% yet. In this lesson, we’ll go over the level of support currently seen in the major browsers, as well as the dev tools they provide to help you when working with variable fonts.

Related Links

2.6 Browser Support

Hey, welcome back to up and running with variable fonts. In this lesson, we're gonna talk about the status of browser support for variable fonts right now. And later on in the course, we're going to go through how to create fallbacks, so that if a browser doesn't have support, it's not gonna be a problem. But before we get to that point, you're gonna need to know which browser should you use for the actual development part of the process. The best way to check on that is to head to and have a look at their information regarding variable fonts, which is what you can see on the screen here. Right now, Chrome and Edge actually have the best support for variable fonts. They have full support with no known quirks. The browser that we've been using so far to check our variable fonts is Chrome. You see everything is working very well. It's all clear and crisp and just as you would expect it to be. Support in Edge is also very good right now. All the fonts are looking as you would expect them to look. They're neat, they're legible, and definitely functional. However, just be aware that if you don't have the latest update of Windows, you might have an older version of Edge. And if that's the case, when you look at variable fonts, they'll work, but you might see some scratchy edges on them. Safari does have support, but you can see this little annotation mark with the number 3 here, which tells us that you're gonna need MacOS 10.13 or higher in order to have that variable font support in Safari. And then the last of the main browsers that leaves us with is Firefox, which doesn't have full support yet. Firefox is usually really far ahead of the game in terms of implementing new features. But in this case, it's probably not a big surprise given that the developers of Edge, Chrome, and Safari are actually part of the OpenType variable fonts project and Firefox isn't. So they're probably just waiting to get information that they need to act on. Now with regular Firefox, you can actually use it on Mac with a couple of flags set, but that's not really necessary. If you wanna use Firefox as you're developing your design that has variable fonts included, then I recommend that you just use Firefox Nightly, which has full support. So this is Firefox Nightly, and everything looks great, everything works properly. So there's no real reason to mess around with config flags, just use Nightly, and you'll be good to go. And even though Chrome and Edge have the most solid support right now, Firefox may still become the best option for working with variable fonts because they're putting together these sliders that are gonna live inside their dev tools that are gonna be really helpful for getting into your design and just tweaking the settings on your axis. And you can see this tweet here from Patrick Brosset of Mozilla. He's giving us a little demonstration of how these tools are gonna look. And they look very, very useful. And even though this tweet says that the tools are in Nightly, they're actually not in there at the moment. We asked about what the status is of those dev tools, and Patrick let us know that they're being worked on at the moment. And hopefully, we're gonna see them come out in Firefox 62, which is about a month or two away from now. It's currently the end of May, so just keep a lookout for those tools to appear in Firefox. All right, so now that you know all about browser support for variable fonts and you know all about the underlying principles that drive them, you're ready to get into actually using them. So now we're gonna move on to the next section of the course titled let's get coding. And we're gonna start at the beginning by learning how you can actually load variable fonts into webpages. So for that, I will see you in the next lesson.

Back to the top