Self-hosting fonts explained (including Google fonts) // @font-face tutorial

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 and 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 sell 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 and we're 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 really old browser support but as you can see the file sizes are 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 squirrel 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 uh 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 kit and caboodle 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 OK it feels like nothing's happening there's 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 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 like the next degree it does also say you know do you 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 you know the usage for when it comes to using them online uh 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 alright so mine is done now um 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 um and if we bring in the file sizes of release 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 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 WAFF and the waff2 or wof-f2 they're like 19 KB uh this one here is 26. this one here is 1926 so it's a lot smaller um 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 wofff2 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 I just have a whole bunch of filler stuff going on basically with it and what I'm going to do is in my uh 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 woff and wofff2 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 let's 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 you know 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 woff two 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 that like the better one first and then if the fallback one second and if you had another fall back 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 if 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 saw Sarah 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 it 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 and a 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 control D and then right in light because that's one of the other ones we have so the control 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 and 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 are or yeah 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 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 uh 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 each one it's already using the font family because it's being inherited from my body so we're just a new 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 uh 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 serif 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 I saw serif 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 could have we have these URLs coming in and before it goes to those you could do a local function here and having it look for something to be local so here I could do Roboto black and if there's other file names that you think it might have or if you're using something else um you know 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 file name though so you just want to make sure that the file names make sense with the ones that might be installed on somebody's computer and that's basically what it takes to sell post 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 coin on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 56,921

Keywords: Kevin Powell, css, front-end, frontend, html, web development, Google fonts, self-hosting fonts, self hosting fonts, web fonts, webfonts, how to self-host google fonts, host google fonts, google fonts, @font-face, css fonts

Id: zK-yy6C2Nck

Length: 15min 39sec (939 seconds)

Published: Thu Feb 02 2023