1.2 Variable Fonts for Fast Loading

Hey this is Cass. Welcome to up and running with variable fonts. In this first video we're gonna take a look at one of the two primary reasons that variable fonts are gonna be a hugely valuable introduction into your web design life. And that is how much faster they can get your fonts loading in. On any site where you wanna use a couple of different variations of a font. So you might wanna have a few different weight, you might wanna have italic. You probably will have noticed that loading in these font files can end up being one of the biggest loads syncs in your website. And what you can see in the screen here, I have two examples of the Libre Franklin font. And they look exactly the same but they're not. On the left side we've got the normal, regular version of the Libre font, and on the right side we've got the variable font version of Libre Franklin. For each one we've got several weights, and for every weight there is a regular and an italic version. We're gonna go into the develop tools, and we're gonna do a load speed test on each one of these tools to see how different they are. All right, so first up with our standard font, we're going to switch this over. So we're gonna emulate a fast 3G connection. We're gonna hold down the Refresh button, Empty Cache and Hard Reload. All right, now let's watch this time down here and see how long it takes for us to bring each one of these different types of fonts into the page. All right, so let's take in a total of 9.89 seconds, and that's a fairly long time just for fonts. Now let's try the variable version of this font. All right, so we give it the same conditions, Fast 3G, and Empty Cache and Hard Reload. And look at that. That is the same look of the fonts but this only took 2.49 seconds. So 2 and a half seconds versus almost 10 seconds. So that's a quarter of the load speed. For the exact same result as far as the way that your site is gonna end up looking. So that is huge. And why does the font load so much faster? The reason is because of what a variable font is. To put it simply, a variable font is just a font with a bunch of settings that you can change in order to modify how the font looks. this font has a setting for weight. And, not only are these variable fonts modifiable, you're also going to be able to control those modifications using CSS. This Libre Franklin variable font, it has a setting that allows you to control the weight. So, you can take one Roman style font file, and you can then change the slider on that weight setting so that you get all these different weights, where the standard version of the font I need a separate file for every single weight that I want to use in my site. So then I have to choose, do I want a slow loading site or do I want to limit my options with what I can do with my fonts? So if we have another look Look at our Dev Tools and in our Network tab. You can see that with the regular font, we need all these different files if we wanna have all of these different looks for our font. Meanwhile, for our variable font, we've only needed two. One for the Roman style version of the font, and one for the italics. And actually with most variable fonts you don't even need two files. You only need one because a lot of them will have a modifiable setting in them to control the slant on the letters. Meaning that you can control things like weight and italics with only one font file. So that's gonna be even faster again. We can see here that this font file loaded in only 1.74 seconds. So we can probably roughly half this load time. And that's bringing that down to about an eighth of the loading time that the other version of the font needed to bring in all of these different variants. So that is massive. That is one of the biggest things that variable fonts has to offer. And in this example we're only looking at the impact of white. But the cool thing about variable fonts is there can actually be all kinds of different settings that you can modify to give you a myriad of different looks. But in no case will you get any extra load time. And that actually brings us to the topic that we're gonna be covering in the next video and that is the amount of creativity and design control that variable fonts can unlock. Here we've just looked at the kind of variations that you're used to seeing in fonts but variable fonts are not restricted to just change in weight. They can change all kinds of things in a font. So the next video, we're going to check out some of these really interesting, new, variable fonts that are coming out. And you're going to see some of the cool stuff that you can do with variable fonts, with no added load time, and in actual fact, likely faster load time than you have with your ordinary, run of the mill fonts. So we're going to check that out in the next lesson. I'll see you there