 Variable fonts allow us to do really cool stuff like you can see right here. And they also potentially offer us a way to improve our site's performance. Variable fonts and just fonts on the web in general are a really big topic. So we're not going to be doing a nuanced deep dive into them. We're just going to be looking at a general introduction to them and how you can start using them on your own sites. So to do that, we're going to be looking at what variable fonts even are. We're going to look at different places that you can find variable fonts to use in your projects. We're going to learn how you can actually figure out what all the different controls for them are because it can change from one font to the next. And to do all of that, we're going to be looking at how we can actually use one of them inside of a project, including the differences you might see between a regular font and the variable font with font face because it's a little bit different. So just before we get into the code really fast, I want to explore what variable fonts even are. And you can see here I have a variable font called Alaska. And it actually has three different versions. I have a variable version, a WOFF2 version, and an OTF version. So this would be the web font. That's my variable font. And that would be for desktop use. So if ever you download fonts, you have multiple different things, that's sort of what's going on. We're going to start looking at the web version here, which is the typical standard one that you normally see where you just have the different versions of it. So you have a contrast and then the hairline contrast, a condensed one. And this font is one that has a lot of different options. So I have condensed ones. I have expanded ones. I have italics, not italics, different versions of the italics, different weights from light to black, and all of these combined together. And that makes for a lot of files as we go down here. And it actually makes for 221 separate font files, which is a little bit insane. And you wouldn't want to use all of those on the web. And if we compare that with this variable font TTF here, it is one file. It's still a very heavy file. And we're going to talk more about file weights and stuff like that a little bit later on. But you can see here, it is coming in at a massive over almost one and a half megabytes, which is probably too heavy to really use on the web. But it has those 221 styles and more basically all included in that one file. So that's pretty cool. And it would be lighter using this than the 221 other ones that were all around 30 to 40 kb. That's sort of the idea of a variable font. We want a font that has a whole ton of styles all built into a single file instead of spread out across a ton of different files or separate files. Now we saw with that that we could have one file instead of having tons and tons of files, but there's more to variable fonts than just that. And this is a site access praxis that is really good at seeing what some of those are. And we're going to look at some really quick examples. So here, and actually, this is really nice because you can drag and drop your fonts into it. So let's change this over to my Alaska. So I can drag that Alaska font in right there and it's switched it over. So this is using Alaska. And you can see that I have different options here. And here's all like the fun things you can do with that, where I'm not using a whole bunch of different ones, but I'm actually going in between a whole bunch of different stuff. We have our italic here and the contrast will probably show up if we have more weight. So we can see that there's like some changes going on. And there's lots of like, you know, moving around, but there's more than just that. A lot of traditional fonts are like that. But let's say we look at this font right here, which is kind of cool. It's called Jam Regular. And here it looks like one of those sort of grimy ones. But what's really cool with it is you can actually like, here's sort of like, it's called the bang control. It's sort of more bold or less bold, which isn't the most exciting. But then we can crumble things. And you can see the letters are actually like disappearing a little bit, right? So that's like sort of more faded out old type versus like this was just typed on a crappy keyboard almost. So you have these different controls for that, the splatter. So like a whole bunch of splatter, less splatter pieces. And then there's the punch, which fills in like these empty spots. So that's pretty cool. So we're getting more controls out of a font than would typically be something we'd ever see. So that's, you know, I find that really exciting, where if we go on this horse right here with this time one, where you can actually like animate it to make it look like it's running, or we see these with these guys down here as well, you know, I can move them around a little bit and have some fun with them or even like this lizard can look like he's running. And there's all these different options that come up with variable fonts. And there's some really creative ones you can play around with these. I don't know if these biker guys can move or not. Yeah, look at that. They can pedal around and stuff. But you get a lot of different controls. Some fonts have very limited. You might have a weight and an excite, which is kind of interesting too. But here you get like tons and tons of controls that do all sorts of different things for the font. And it's opens up a completely new door to being able to do typography on the web. And so they're really cool. But how can we actually find some of these to start playing around with? So what I've done is I'm starting this simple project here, we're going to explore our variable fonts within each one, my class of variable font there, I just have a little bit of text looks nothing fancy on the screen. And I've just used grid to place the text in the middle. So we haven't really set up anything else other than that. So far, and then we'll dive in and now set this all up with an actual variable font, look how we can explore the different pieces of it and break it all down. And the raises the question of where can I find a variable font to use on my projects. So you can actually get them from a lot of different sources, including Google fonts. And if you just search variable fonts, you'll find some there as well. The Google font versions of them, there's a few things that I'm not a huge fan of, but it is definitely an option. One place I like is V fonts calm variable fonts here, any website I mentioned will be linked in the description. And what I like about this one is you can go to your licenses, and you can sort by license. So if you don't mind having a paid font, you could go by paid ones. In this case, there's free for non commercial use or free for commercial use, which is really cool. And we can click on there and you'll see there's lots of little sliders and stuff, we're going to get to those in a minute. But for this demo, I'm going to be using Kiev type here, which is was really nicely created. It was a series designed for the Kiev city identification. And it's completely free to use. So we can go over here to be hands. And this is where the font is hosted and where you can get it from. You can see the people that helped create the font or who are responsible for ordering the font and making it free. So a big thank you to all of them. And on this, it gives you all the different examples. It's a really cool font that we can use. And if we scroll all the way down, you will find both a link to download the font. And if you do want to help support what's going on in Ukraine, there is a link to that as well. And so right here, you can download the Kiev type. It goes to a Google Drive folder. You can just download it from there and then unzip the file. Now, once you've downloaded the font, unzip the zip file that you got from there, you'll notice that there's a few different options in there. We have icons, you have a no variable and a variable. So this is like Alaska. It's very common if you download a variable font to get both a non variable and variable version of it, just so you know. And in this case, they've also included some icons. And just if we do look in here, there's the web, the TTF and the OTF. So for web, we can see here, I'm just going to look at this really fast because file weights are important when it comes to fonts on the web. And you just primarily actually want to focus on the WOFF2. And the reason we only really want to focus on the WOFF2 is browser support for that is pretty amazing these days. If you really wanted to, you could look at and compare it to the WOFF as well. But the file sizes are very, very similar between them. And you're looking at every font in this case, coming in, let's say 35 to, you know, some of them are over 40. So in that range, 35 to 40 kb each. Now, if I jump back over and I go look at the variable GX1 that we have here, you'll see there's three different ones, ones for the SARS, ones for the serif, and one is for the tilting here. And they range in weight by quite a bit. We have 361 for this one, 189 and 210. And you'll also notice that they're true type fonts. And by being true type, that means they are quite a lot heavier. And in this case, I want to set up using the SARS and the SARS font weight, you can see this is 361. And that's basically the same as using less than 10. So maybe eight font files of the other one, which seems a little bit excessive. And this is the first thing with variable fonts, you do have to make that trade off of, am I going to be using enough of like the different variations of it to make it worthwhile? You're just using a regular and a bold and maybe an italic it might not even be worth getting into the world of variable fonts. But if you need to have the controls that we're going to be looking at here, then it becomes very, very important. And one of the issues here too is because these are TTF files. And from my experience, most variable fonts that I've downloaded are coming as TTF and not as WOFF2, which has much better compression. And there are online conversion tools that can convert fonts for you from one to the other. You do have to be careful with them though, because many of them will actually strip away all of the powers of a variable font from it, which is not a good thing. Though there are some solutions out there, though there are a few that we can use and I'm going to be looking at one in this video. And there's also some command line tools I'll link to some stuff in the description talking about those where you can set up and make the product, you know, you can sort of do a lot of control over what's going on through those, but they're a lot more complicated to set up. So we're just going to look at the simplest solution in this video. So the site that I have found that does allow us to convert TTF to WOFF2 is one here, it's called everythingfonts.com that has the converter for it. Once again, we'll be linked in the description. And basically with it, all you need to do is pick your font file. And so here I can grab and choose the sans that I want, click open, and then we can just click convert. Once again, it's going to download a zip file and you can just unzip your file and keep on going from there. And here's my on zip file. And now we're coming into something that's a little bit better. We have 126 kilobytes, which is a pretty reasonable size. Again, we're looking before at 35 to 40. So we're in the range of like four font files. And that's typically where you find that sort of tradeoff happens. If you need three or less, it'd be less heavy at least to be using the traditional font files. But once you get to like four or five different weights and styles that you might be using, then the variable font can be better. Plus there's less network requests soup is when they have one thing to download. Now what I'm going to do is in VS code, I'm using VIT. So just follow whatever structure you need for your own project. But I need to put it in my public here, I'm just going to make a new folder called fonts. And then I can just bring in that into my fonts folder. One thing always with these, they always give them kind of weird names. So, or, you know, sometimes the font names are a little bit long. So I'm just going to shorten that a little bit. So it's a little bit easier to work with. And now I can start using this within my project. So what do we want to do is first we need a font face declaration. So what I've done here is set it up. And you'll notice maybe one thing that's a little different than what you might normally have seen is the font weight. And I'll talk about this in a second and where those numbers are coming from. But otherwise, it's a pretty regular font place declaration. Now if you look online, you might find a couple of different things about the format. So one of them would be a format with variations here, which is telling the browser that it's actually a variable font. And we could leave that like this and it would work perfectly fine. The problem with variations has actually been deprecated. The new one is to leave this off and to come over here and it's tech. And then in the tech, we would write vari variations like that. The problem with this is this is what the new standard is, but it's not actually supported yet, as far as I can tell. And if you put this in here, it will invalidate the entire font face declaration. So for now, I'd recommend you can even leave it like this. And I think it would be safe. But from all the testing I've done, this is still working, even though it's been deprecated, browsers should continue to support it. So we can leave it like that for the moment. And then as far as these font weights and figuring out where this comes from, there's different tools that we can use access praxis that we saw earlier is one of them. But another tool that we can use is this one right here, which is what can we find you where you can pick your font file. And in this case, I'm just going to use my saws ttf. It's going to be the same thing. If you have your w o f f two that you've converted, you upload it, and it's going to give you all the information for that font. And if you scroll down a little bit further to this testing area, you're going to get a few extras here. So I'm just going to increase the font size. If we come here now, we can see we have a weight, a contrast and a midline axis that we can play with. And so my weight is a standard one of the standard axes. And there's a few different ones. We'll talk about those in a second. But you can see if I play with my weight, it goes up and down. And it goes from a scale of zero to 1000. And different variable fonts will have different scales for weight for italics for the custom ones. And even like you can see here, we have a midline scale that actually goes from negative 1000 to zero. So you unless your font comes with documentation, which I do not find is very often, you need to use one of these tools to find these. Because in this case, we have three, if I was using Alaska, we'd have other ones that would be different from this. If I was using another variable font, it might only be weight. There's lots of different things that can come in. And every font is unique. So you need to find a way to find out what axes are available to you. Now, as I mentioned, weight is one of the standard axes, we also have italic, we have slant, we have width, and we have optical size. Those are all the standard ones. And for the most part, they're either they are mapped or are meant to eventually be mapped to regular CSS properties. And so for weight, we can actually see that. And that means that here, I can write the weight range that I want to be available from that if I put 500 here, I believe we'd be capping it at 500. But in this case, my font weights go from actually, I said 100, but the weight goes all the way down to zero. So we don't want to cap anything we want to say we have from zero to 1000. And what that means now is when I'm using those fonts, let's go and set this up with the demo that we have here. And I'm just going to scroll down because I added that class of variable fonts. So variable font, if you remember, I had that over here. So just so we can sort of separate the two and just focus on the variable font stuff here. So here, we can do font family. And I'm just going to use the font family key of sounds like I put right there, we can see it's coming in. And then we can play with different font weights. And so I can do a font weight of one, and you can see it's actually there. And we can go up to 500. And I can go all the way up to 1000. And we have all of those available to us. And I've just made the font a little bit bigger to make it easier to see what we're doing and play around with. But yeah, font weight is one of those ones, we can just do it as a regular property because it's one of the standard axes. And we can map out the different options for it up here. And the standard axes are that we can always do that where we can map the availabilities when we declare within our font phase declaration. Where things get a little bit more interesting is when we get into the custom axes. And how do we even know if something's a custom axes or not? Well, there's the ones that I mentioned, those are the standard ones, but you can also tell just by looking at the name of it, where weight gets a WGHT, and it's all lowercase contrast is CONT uppercase and midline is uppercase. And it's uppercase, it's a custom axes, if it's lower case, it's a standard one. So that can help you a little bit too, because the ones that are custom axes, we have no CSS property that can actually control that like font weight, we have to do something using, we have to do it all actually with our font variation settings. And there's a little bit of a downside to font variation settings, but it's not too bad. We'll see what it is and how we can get around it as we go through this. And so to be able to use that inside of parentheses, I'm going to put CONT. And then I can write in the number that I want here. And you can see that has changed what this is looking like completely where I've added contrast to it. And I could bring this down to a 50 and have a little bit which would technically be more than the zero even though it's probably hard to tell at that point. But you can sort of come in with these varying levels of it. And just like my font weight here, I have every number from like basically from one up to 1000, including like 337 if I wanted that for my font weight. So we're not limited to the numbers like you would get in a traditional font family, we're really opening up to anything within that range. Now in this case, I am doing my contrast, but you might want to have your contrast. And the other one I had was my midline. And so that's an MIDL. And then I can put the number and I just have to remember the range on this one was from negative 1000 all the way up to zero. So I can do that and you can see it sort of changes the in between sections on the letters and plays around with it a little bit. So I put that back to zero, or I can go back to negative 1000. And it's where we get that fun sort of effect that we can play around with a little bit here. If we wanted to, I could also declare my font weight without doing it here, I could include that here with the WGHT and then put my 1000 there. And that would also work personally if it's something that can be declared with just a regular font weight, I find that a little bit easier to do. So whether you do it here or as just a regular font weight like we had before is really up to you. I tend to like just having font weight as font weight because it's a property people are generally familiar with and I'm more familiar with so it's just you get used to using that. And just so you know, if we had both, so WGHT and I put 100 here, just so we have a different number, you'll see that this one is winning. And it's not winning because the order because even if I come down here and I set the font weight afterward, this is still going to take over. So the font variation setting is more important in a sense than the font weight is. So it's really up to you and how you want to work with it and what you find easier. And yeah, there we go. That's how we can set all of those up. And of course I mentioned that there's one annoying thing with these is just having to declare it because if I wanted to change something here, you're sort of, you know, you have these different things all set on here. So if you're relying on inheritance or something like that, and you want to change one of them, you actually have to re declare all three. And let's let's look at setting this up a bit on my body just as an example. So if I go on my body, and we just say, let's put the key of sounds all the way up here as well. So we're declaring all of that there. So we can see they're coming through everything's being inherited from here. But maybe on this one, I actually want my midline to be zero for the regular body stuff. So that's all being inherited into my variable font h one over here. And when I want to use that, I might not want to change this, I might want to only change the midline. So let's say we change this one over to that negative 1000. The problem here is this contrast isn't actually coming through anymore. So if I did a contrast of 1000 here, or we did a, or you know what, this would be more obvious if I do this one, a negative 1000. And then I bring this one down to zero, we should have a high contrast on here. And to bring that one in, because this one really stands out, you can see this is what it should be looking like. But if I don't include both of them, it's treated like that one isn't actually set anywhere. And it goes back to the default. Right. Because there's just, we're re declaring that entire property. So that can be a little bit annoying. And to experiment and play with this a little bit, what we're going to do is move over and look at how we can animate these as well. Because that's another fun thing that the does open up doors and there's something as fun as the animations are, there's a bit of a got you with them as well. Not a got you, but just something to be careful with. So here, why don't we put our font weight down to the one, which is the smallest it can get to. And we're also going to hear have our midline at zero and our content zero, just as sort of a default starting point. And then here, what I can say is on my font weight, I want this one to go up to the font weight to increase up to 1000. And then here, my font variation settings, I'm going to change the m idl to be negative 1000. So we can see we get a little animation going on when we have her on top or not animation is jumping. We want it to be animated. So just like anything else, we can do a transition of my font variation settings. And then we can just choose a time. And now we're actually animating between them on one of the axes, but we're not doing the font weight. So this is a time where maybe you want to bring the weight down. Or of course, we could do and transition both, it's up to you. So we'll just do font weight at 500 milliseconds here as well. And then we'll get both of them animating. And while that's working with the font weight being here, we're just going to, I think it's a little bit more concise if we actually take it off and set these all up here, just to sort of highlight how we can work here. So I'm going to do the font weight of one here. And so we can put our weight 1000 there, we get the same result with only a single transition. And the advantage with that, I'm working this way is if you are going to be playing around with these numbers a lot, because then we can set them up all as custom properties. So here what I've done is I've put these all to custom properties with the values we had. And then I've just redeclared it down here using the custom properties. The advantage of doing this is we can don't have to retype everything out like we were doing here. All we need to do is choose the one that we want to change. So maybe you only want to change your font weight. So my font weight becomes a 1000. And then in this case, it's going to be animated. But even if you weren't animating it, you could just come and redeclare in, you know, my headings are using this variable font. And then my paragraphs are using this other weight and things like that. So this is not just for animations, but it could be something you use. And then we could also say that my midline, so we just come in with font midline. And in this case, my negative 1000. And then we get that sort of same animation that we had going on just before. And we're not worried about redeclaring this or skipping out on and having to repeat ones that we were repeating before. We just have to use the custom property along the way and set things up and get them all working. And you can play around with that and have some fun with it and not do all sorts of creative things or of course just use it to increase the performance on your site. And if you're looking at variable fonts as an option on helping with the responsiveness of your site, sadly, I mean, they're really useful, but making typography responsive can also be its own struggle and whether it's variable fonts or regular fonts. And if you're interested in simple ways to make typography more responsive, you can check out this video right here. And with that, I'd like to thank my enablers of awesome Jan, Johnny, Michael, Patrick, Simon and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your point on the internet just a little bit more awesome.