 Hi there my front-end friends. Today we're going to be talking about web fonts, and I think for a lot of people one of the first things that comes to mind with web fonts is Google Fonts, and really Google Fonts changed the game when it came to web fonts in general because it made them easy to use and at least for a while a lot more performant than self-hosting. The performance thing took a big hit a few years ago when cross-site caching bit the dust to prevent user tracking, and more recently Germany ruled that Google Fonts were a violation of GDPR, which can be a pretty big pain for anyone living in Europe who's trying to be GDR compliant. Luckily though, you can keep on using Google Fonts, but hosting them locally instead of relying on their CDN to deliver them, meaning that you are GDR compliant, plus if your host does use a CDN it should be nice and performant as well. So in this video we're going to take a look at how we can get the fonts in the first place, optimize them so they're not the super giant files that Google likes to give us, and then set them up on our own site, and of course all of this would work with non-Google Fonts as well, so you can use the timestamps down below to skip ahead if you have any fonts of your own or if you're using a different source. And now to get started, the first thing we want to do is jump on over to Google Fonts, as you might guess, and here we are, and you want to choose the font that you're going to be using. I will give a little word of warning, some fonts in Google Fonts are variable fonts. We're going to be looking at the ones for static files in this case. If you do get a variable font it will come with the static ones as well. Though I will be doing a deep dive on variable fonts in the future, they do take a little bit more setup and there's a few sort of different things than a regular font though, so I just want to focus on getting them up and working in this one, and then in a future video we will look at variable fonts. But what we're going to do is come here where it says download family. We do not need to add anything, you don't have to choose your weights or anything like you might do. Typically you just click on the download family, and then after you've clicked on that it will download the font family for you. It gives you every single weight, every single style that's completely fine because once we self-host that doesn't really matter too much. Now it is a zip file that you're going to want to unzip, so let's go and do that, and as I said you should get a whole bunch of fonts, font files like you're seeing here, and there's one big problem with these. I'm going to change the view here so we can get a little bit of information on them, and true type files do have the best browser support if you're worried about the old browser support, but as you can see the file sizes are really big for each individual one. If you are using a variable font it is better because it's one file, though it will still be a very big file, and ideally you're not going to use these files here, we're going to convert them over, and now there's many tools to be able to do it, but the one I'm going to suggest is font scroll here, and font scroll if we come here there is a web font generator, and this is linked down in the description as well, so you can just go to there, and then you're going to want to go to upload fonts that we can see right here, and then what you want to do is just select the ones that you want to transform over, if you need all of them go ahead and take all of them, if there's only specific ones that you want go and grab the specific ones that you want, in this case let's just do a medium, a light, and a black, and we'll grab an italic here, a bold italic just for the fun of it as well, just so we can explore some you know a little bit of what having these mean, but even if you take all of these and bring them all into your site, we do want to be careful because we don't want to use too many, but if they're all there, but they're not actually being used by your page, they won't be downloaded by the browser, the browser will only download the fonts as it needs them, so if it runs into a specific weight and font style, then it will download that one if it is something that is being asked for, but if you want to just go through with the whole Kidding Kaboodle, you can definitely do that, but again regular, light, bold italic, and a black for now should be fine, this is the fun part where once you click okay, it feels like nothing's happening, there's nothing on their page that actually lets you know that things are going on, you just have to trust it and you can see it has come in now, and you can actually go to expert mode here and you can sort of do your own styles, you can change the formats that are going to be used and other stuff, I'm going to suggest just to leave it on optimal unless you really know what you're doing and you want to go in there and make some changes and really optimize things to the next degree, it does also say, do you own these fonts? Are you allowed to use them? If it's from Google Fonts you are, other sources do be careful with it, if it's a paid font you have to be careful on how the usage for when it comes to using them online, but we're going to hit download your kit right here, and now you can actually see it's doing something, at least on the other end we couldn't see anything, so it takes a little while to do this, but not too long, obviously the more fonts you have the longer it takes, and I'll see you once mine are done. All right, so mine is done now, and look what we've got, we've got a whole bunch of stuff when it downloads this, and before I switch the view just so we can see a little bit better what we have, I want you to look at the file sizes here, and you can see they're really small, and if we bring in the file sizes of these before they were changed over, you can see that this is the zipped version of them, but it doesn't really matter, it shows the size, this is the compressed size, so like we're looking at file sizes 160, 170 kb, now that we've switched these over to this WAF and the WAF2, or W-O-F-F2, like 19 kb, this one here is 26, this one here is 1926, so it's a lot smaller, so this is one of the reasons I would strongly suggest not using the TTFs, but to switch them over to the W-O-F-F, or W-O-F-F2, and browser support for W-O-F-F2 is really good, you're probably safe just using that, but we'll set both of them up now just so we can see how it works, so the first thing is you're going to need a project to bring these into, and I've set up a very very simple project right here, that doesn't have too much, it has a whole bunch of filler stuff going on basically with it, and what I'm going to do is in my site here, in the folder, I'm going to make a new folder called assets, and in that assets folder I will make another new folder called fonts, and in that fonts folder, I'm just going to come to my explorer here, I'm going to select all the W-O-F-F and W-O-F-F2 that I got, and I'm going to drag them over here into this fonts folder, you will notice you have HTML and CSS files here, I said we're going to change the view, so let's switch it, we have these HTML files, and it did give us a style sheet, you don't need these, if you want to see how they've set things up, because they give previews of the fonts, and stuff, you can definitely go and poke around, maybe use that as a refresher on how to set up your fonts, but we're going to cover all of that now, but the important thing is you have them all here, if you want you could shorten the names a little bit, but it's fine, we'll leave it as is, we won't make any changes, and we're going to jump on over to our CSS file now, and here's what my page currently looks like, which is not the greatest thing in the world, so we're going to make this look a little bit better, and we're going to be starting off by coming all the way up to the top here, and we're going to set up some font face declarations, so we're going to start with our regular one that we have, so we're going to do an at font face, just like that, and you don't actually have to include anything else here, everything else is what goes inside of it, so the first one is my font family, and then you're just going to write the font family that we have, in this case it's Roboto, we can leave it just like that, now the next thing we're going to do is my font weight, and I'm going to write 400 here, because we're going to do our regular weight to start with, and you'll notice right now, VS code is mad at me, because it's sort of underlining and saying there's a mistake here, and that's because right now we don't have a source, and so we have to tell it where the font file is for this font, so you do that just with our SRC here, and then we can use a URL, just like a background image, or something else like that, to say where the path of the image is, and if you view something like the picture element, or the video, or audio, you'll also know about the format function as well, which is where you're telling it what file type it is, so we'll start with this, because we have two different ones that are possible in this case, we have the WOFF2, and we have a WOFF, right, when we're bringing these in, so I have the regular here, and then the regular here, but just with two different file types, and when we're doing a font-face declaration, we want to put the one, the better one first, and then if the fallback one second, and if you have another fallback third, so we're going to start with the WOFF2, and we're just going to put that inside quotations, and so this is the ideal one, this is the one I want the browser to use, and then we just put a comma, and then we can do another one here, with our URL, our format, and then you can do your regular one like that, and if you brought in a TTF or any other format, you can include these, but again, the browser support for these two is really, really good, so you're probably completely fine just using those. Now for the URL here, it's just like you would for an image or anything else, we just put some quotation marks, and then in this case, we have an assets folder, my fonts folder, and then I find the file I want, and I can copy that, paste it in here, and this is my one like that. So what happens is the browser will look at this, if it understands it, it will take that one, if it doesn't understand, it will look at the next one in the list, so you're going in the order from the best compression down basically, and the advantage with that is if there was a really heavy file that you needed here, it wouldn't use it unless it needed to, so for performance reasons and all that, it's fine if you have all these extra files in there that aren't actually getting used by the browser, it's not downloading every version of these. Now before we bring the other fonts in and look at this in a little bit more detail, let's just move this off to the side for a second and take a look here, where let's come on my body, and now I'm going to say font family, and we're going to say Roboto and see if this works, and hit save, and it is working, and then here we can also come in with a fallback, so we can say Serif like that. Now it is working, but you have to be very careful with this to know if it's actually working or not, because I have Roboto installed on my computer, this would work regardless, because it's locally hosted and so we can find that font on my computer which makes it a little bit easier. So now the next thing is we want to be able to bring in other font weights, so what I'm going to do, and if you remember we have our regular, I also have a light in the black as well as a bold italic, and we'll get to the bold italic at the end, but what I'm going to do here is I'm going to duplicate this, and in there what we want to do is on this one, we're going to bring in the next one, so I'm just going to select the word regular and then push ctrl-d and then write in light, because that's one of the other ones we have, so the ctrl-d if you're on a Mac it would be command-d, selects both of them, and then the light I want to map it to a number, and what this is is the font name here and the font name here are what we're going to be using down here, and the font weight is we're telling it what this file is, so just for fun, I'm going to put a 700 here just to show you, or let's start with 300, then we'll come back around to it, but normally a light would be 300, so now if I came and I said that all my headings, or let's just do body, so I can say font weight is 300 and it's going to go to the light version of it, but just for fun, if I mapped this over to 700 instead, and then I said that my font weight was 700 here, you can see it's actually going to the light version, it's also mucking up my headings actually, because it's trying to go to the bold version of that as well, and so the number that's here is really your choice, and this is even for the name, I could call this font ABC if I wanted to, and you'll see it's actually broken everything because it's not really using Roboto anymore, or it is probably my system version of it, but it's using the 700, whereas if I change this to ABC now, it's going to go back to the light version, because it goes what's ABC, this is ABC, this is a font weight of 700, so whatever name you're putting here, it's important, and the weight that you're putting here is important for how you're going to be using the font in your own system, and in general, I would recommend putting the actual name of the font, because you'll come back later if you don't, and be a little bit confused, and we do have to be careful with things a little bit, because you'll notice that the bold fonts are working, and that's because I have a Roboto installed on my computer, I have seen people use web fonts locally, where it's installed on their computer, they don't set up the font face correctly, and they don't realize it, so if ever you upload your project online, just double check your paths or stuff, or do like I did here, where you change the name to something completely different, and then you should see if it's actually going to work or not, and now we can set these other ones up really fast, so we're going to do the black, so that would actually be, we'll do that at 900, and then here my light becomes my black, and that's completely fine, but there is one other difference that we're going to have is our italic, and for the italic, it was under my bold, so you could do it in whatever order you want, but I'm going to just do it here at the end, and for that you can just come down and do a font style here of italic, the weight in this case is my bold, and then you just want to make sure that you have the right file name, so in this case it was my bold italic all together, so select both of those, bold italic, so now if I come down, or let's just say my h1, let's just style my h1, h1, it's already using the font family, because it's being inherited from my body, so we're just going to do font style is italic, and my font weight is 700, and we can switch over, there it is, we have the italic one coming in at the top, now one way we can see if this is actually working or not is if I try and switch this over to 900, and I hit save, you'll notice it doesn't actually get any bolder, if I take off the italic, you'll see it actually is bolder, and that's just because it's looking for the 900, it can find it, if I put italic on it can't find a 900 that is italic, it can only find the 700, so it's going to be using that one because that's the closest one that it can find, so let's switch that back over, now one thing you might notice here is when I'm setting these up, I've just been writing Roboto, and everything is going okay, but I would suggest putting in a bit more better of a font stack, even if it's a Saucerif, or you could create a better font stack than that, but having fallbacks would be good just in case, you know, as I said, the swap, it will use the Saucerif until it's had a chance to download the file and switch it, if you went from a Serif font to then a Saucerif font that could look a little bit weird, so providing fallback fonts would be important, you can also direct it to local fonts in these areas as well, and you do that under your source here, so here we have these URLs coming in, and before it goes to those, you could do a local function here, and have it look for something that'd be local, so here I could do Roboto Black, and if there's other filenames that you think it might have, or if you're using something else that you think users might have, that way it would actually not download anything, and it would make sure that it's going to use the local one first, if it can't find the local one, then it would go to the URLs here, and we'll have to match the filename though, so you just want to make sure that the filename makes sense with the ones that might be installed on somebody's computer, and that's basically what it takes to self-host Google Fonts, you can do this with their variable fonts as well, though there are a few extra steps, so I will link to more documentation down below on using variable fonts, and I will be making a video on it in the somewhat near future as well, and of course part of using fonts is actually getting them to work, but the other thing is picking fonts for your own personal projects, which can be really hard, if you'd like some easy ways to make decisions on picking fonts, I have a video right here, and if that one doesn't suit you, you might like this other one here instead, and with that, I'd like to thank my enablers of awesome over on Patreon, 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 corner the internet just a little bit more awesome.