FREELessons: 18Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.8 Fallbacks

As we talked about earlier, complete browser support for variable fonts is not quite there, so we’ll need to provide a fallback for browsers that aren’t ready yet. We’ll go through creating fallbacks in this lesson.

Related Links

3.8 Fallbacks

Hey, welcome back to Up and Running with Variable Fonts. In this lesson, we gonna be going over the last thing that you need to be aware of when you're working with variable fonts, and that is how to set up fallbacks. It's gonna be a little while until we've got full compatibility across all major browsers. And when we do, you're still gonna need to support legacy browsers anyway. And now, what I've got here in the screen is just a trimmed down version of the file that we created earlier when we were working with the Libre Franklin font. So I've just saved it as a new filename underscore with fallback, added in a new title. And now I'm only loading in the Romans version of the font. Because I just wanna minimize the amount of code that you're working with in order to see how fallbacks work. You'll be able to expand this out to work with any manner of code that you need to. And we've just got our same HTML styling. And we're just working with two looks on the font here, the regular weight and the bold weight. If we preview that code in Chrome, everything looks just fine. We've got our Libre Franklin regular and bold, and they appear just as we expect. However, this is the current version of Firefox, not Nightly, and as you can see, the weights are incorrect. It's actually loading in the font, but it's just not displaying it properly. So now let's go ahead and set up a fallback for that. Just a quick note, you will see some articles that are a little bit older now giving the advice of using this code, format woff2-variations in your font-face declaration, and using that as a way to detect support levels. However, that doesn't work anymore for a couple of reasons. One, because Safari was the only browser that was probably supporting that code anyway. And from what I've read, that syntax is gonna be changing, so don't rely on that as a way to detect browser support. What we're gonna do instead is set up a couple of @supports rules. And we're gonna use this to detect whether this property is supported. I'm just gonna add brackets, add this inside, and then put : normal. And right now, that's a reliable way to check on support. If this property is supported, then so is everything else to do with variable fonts. If it's not, then you need another solution. So what we're gonna do is put all of the variable font related code in between these brackets. And then it only gonna be used by the browser if variable fonts are supported. We're gonna grab our font-face rule and put that up here. Make a little bit of space. This code is generic, that will work with or without variable fonts, so we'll keep that there. But we'll move these lines up inside our supports rule as well. Because obviously this rule here is only gonna work if we have proper support. I'm gonna save that, and now let's look at the difference between the two browsers. So Chrome is still looking just fine because it does support variable fonts. But in Firefox we have no font formatting at all. It's detected that its browser doesn't support variable fonts. It doesn't support that particular property, so it's not using any of that code inside that rule. So now you need to be able to set up the code that is going to control the font styling on this non-supporting browser. And this is where you have a couple of options. We know that we can make this font, Libre Franklin, look exactly the same as with our variable font version. But we have to load in the standard static versions of the font in order for that to work. We need the regular version and the bold version. But ideally, we don't wanna load those font files in, if we don't have to. Because we're trying to use variable fonts to minimize the amount of font loading that we're doing. So one option that you have is to set up another rule, another supports rule. Just copy and paste what we just wrote. Only this time, you say supports not, and you can put your fallback code inside this rule. So now if the browser does not support this property, then use this code. However, the tricky part is, this rule is only to going to fire off if the browser also supports the @supports declaration. So if we go to can I use, this shows us the browsers that will work if we have all of our font styling code wrapped up in these @supports declarations. So you can see here, browses up pretty strong with this API. The only red flag we've got here is IE 11. So it really depends on how far back you need to go, how far back your support needs to be. If you need to support IE 11 and other browsers that don't work with the @supports rules, then your options are to put your non-variable font code outside any support detection mechanism, just to load the unrequired font files anyway. Or perhaps if you really need to go a long way back with legacy support, maybe reconsider using variable fonts for the time being. But if you're working with a browser other than IE 11 or other really old browsers, then you can put your fallback code inside this declaration here. Now, I already went ahead and converted the TTF files for Libre Franklin Bold and Libre Franklin Regular into woff2 files. I'm just gonna hit F2 to rename and copy that file name, because in our fallback code here, we're gonna load in this font. So gonna grab all of the code from up here, paste it down here, indent it nicely. And I'm gonna take this filename, and we're gonna load that in up here. So that brings in our regular weight and on this line, we actually gonna change this so that we associate font-weight normal with our regular font-weight file that we're loading in. I'm just gonna copy this code again, So that we can load in the bold version of the file. So that is this one here. So we've got our bold file being loaded in. We're gonna change this to font-weight: bold. And now all we need to is update our styles, so that for our regular class, we're saying font-weight: normal;. And for the .bold class we're saying font-weight: bold;. So now, what we've done up here with our variable font, we've recreated where there's no support with this code here. We're loading in twice the number of files, and we don't have the option for so many different weights. But for this purpose, it's gonna give us the same results. So now let's take a look. All right, so sure enough, our Libre Franklin font here is looking the same. And if we just refresh with the network tab open, we can confirm that we're still loading in the variable font here, Libre Franklin Roman. We go to Firefox. There we go, now we've got the look that we want with our Libre Franklin font. But here, now we can see, if we go into the Fonts tab up here on Firefox's inspection tools, and we're loading in the regular font file and the bold font file. So that is how you can handle a fallback using @supports rule on the font variation settings property to check that a browser does have support. Then put all of your variable font code inside this rule. Then have the inverse of that. See if variable fonts are not supported, and put your fallback code inside there. So that is everything that we needed to cover to get you fully ready to work with variable fonts. So you've got all the theory on how they function. You've got all the tools you need to actually start using them in your code and in your websites. So now I've got just one more video in the course. We're gonna wrap up everything that we stepped through. And I'm just gonna give you a little summary that bullet points all the most important factors of working with variable fonts. You'll be able to come back to this video any time that you need a quick refresher, just to jog your memory and remind you of those key elements of working with variable fonts. So I hope you'll join me in the final video, I'll see you there.

Back to the top