 Hi, my name is Kevin, and here on my channel we learn how to make the web and how to make it look good while we're at it with weekly tips, tricks, and tutorials. Back when I started making websites, we had to rely on system fonts only. These days people are spoiled with all the different fonts they can use, but there are so many different ways to get our custom fonts onto our web pages. But did you know that Chrome doesn't cache Google Fonts between sites anymore? I've put a link in the description for more on that, but it does mean that knowing how to locally host our fonts is super important now, and that's exactly what we're going to be exploring in this video. All right, so locally hosting fonts, let's get to it. So the first thing is we need some fonts to be able to host, and I've actually already grabbed some, and you can see I've downloaded them right here, but I want to look at where I got them from because that is very important, and if you'd like to skip ahead, you already have some fonts. There are chapters down below, and you can get to the different parts, but I do want to show really, stick around just a little bit to make sure that you know a few important things here because sometimes you've downloaded fonts, but you can't actually use them as web fonts. So one place you can get web fonts from to host yourself is called Font Squirrel, which is extremely popular. Now a lot of them you have to watch out because you see here it says Offsite, let's just make that a little bit bigger. If we come and take a look here, you can see like they have these download OTF offsite. If it's offsite, it usually means that you have to sign up. A lot of the time it's, I think they're always free, but we can check to make sure, but you do want to make sure that you just might have to sign up for a free account somewhere. So that can sometimes suck if you don't feel like signing up for a free account on a whole bunch of sites. So one thing you can do here is, first I'm going to make sure that the licenses are my web font, I have a web font license that's included because just getting a desktop one is completely useless to us. And the other thing is for simplicity sake, I am going to choose local only here. So that way I'm only looking at ones that are hosted by font squirrel and that I can get directly from font squirrel. So I don't have to sign up for accounts in other places. It can also be, you know, do you want anything for family size or four plus style? So that's when you're getting like your bolds, your italics and all of that stuff. So you can play around with that and play around with how they're sorting it. And then you can choose whichever fonts you want from there, which is really cool. And I've already chosen a font that I want to be using, which is this one here, mathlete, I guess it's called. I just chose it because we have italics and bolds in the regular. And so if you can set this up, you can literally set anything up that you want. There is one thing to be careful with free fonts is sometimes there's characters that aren't available in them. So you can see here, it says there's 222 glyphs. Some of them might be a lot smaller. Some of them might be bigger. So if you need accents on your text, like you have a, you know, if in French, it makes sense a year, you have your umlauts and all of that. Some free fonts don't come with this type of thing. So, um, and every, this one looks like it's also all, all caps only. There's no small letters available. So that, you know, there's different things you want to look for. But we're not going to worry about picking our fonts. Now, the one thing that people often, when they come here, they're just going to click download OTF. We don't want to do that. If I'm going to download the OTF, that would be to use it locally on my computer and install it on my computer, but it would not be for hosting it. So what you want to do is you want to click where it says web font kit and click on that to bring this up. And then you want to download the font face kit right here. And this is what you're going to be able to host. And it's because they're going to give you different file formats here. And I'm not going to deep dive the different things here. Um, but just know that in general, WAF is the only one you really need. Um, TTF, it says that it was replaced by the WAF. And there is a WAF two now as well. And if you're using variable fonts, I think they have to be WAF two. Um, WAF two has an advantage of being lighter weight, um, whereas compared to WAF, but other than that, um, you know, if you're just using WAF, you're getting pretty much perfect browser support. If you really need to support legacy ones, you can come through and you can download all of them, you know, whatever you want. Um, but it's really unnecessary these days just to show, uh, let's go and actually check out, can I use? I'm pretty sure can I use? We'll show us if I put in WFF web open font format. Now the reason that, um, opera mini here isn't supporting or is it's not supported by opera minis because it doesn't even support at font face, which you need for custom fonts. So this is using system fonts no matter what you do pretty much. Um, but across the board we are pretty good to go. Um, you know, that's as good for browser support as you're going to get for basically anything these days. Um, so yeah, awesome. So when we do that, we can come to here and I can download the font face kit and let's just open it. And before we dive any deeper into this, I just want to let you know that this video is being brought to you by Skillshare. Skillshare is an online learning community that offers thousands of classes, including ones on UI and UX, front end development, freelancing and more. Now, if you're not only looking to get fonts hosted locally, but you're also trying to figure out which fonts to choose from in the first place, they have an awesome class called how to look at type fundamentals of a web typography by Jason Santa Maria. It breaks down typography, exploring how to discover, select and make the most out of typography on your website. If you'd like to check that class out, the first 1000 people who sign up with the link in the description just down below will get a free trial to their premium membership, which gives you access to Jason's class, as well as thousands of other curated ad free classes. Once that free trial is over, their premium membership is less than $10 per month on an annual plan. So use that link down below to check it out. And now let's get back to hosting those fonts that you've gone and chosen. Now, once you've downloaded and unzipped it, I just want to show you what you're getting. So there's a how to use the web font. So this could always help you out. And we can come in looking here and they're giving you one folder for each one of them. And so you're going to have to go into each one of them, go and find the file and move that into your project folder. Just so you know that they are giving you a style sheet, which can be useful just to get the basic setup of it. And they give you like a specimen file, which shows you what it looks like and stuff like that. You don't have to worry about what you really need is this guy and the style sheet can be useful. So what I'm actually going to do is open up the style sheet just so I can cheat a little bit. And I'm going to grab this and we're going to come to here and we're going to go to my own style sheet. And I'm going to paste this right at the top of my own. And this is the at font face. And at font face is how we support our own. And look at this. This is huge. And by default, even though we only downloaded from font squirrel to W O F F one or the Waf, it gave us everything here, just assuming that we downloaded everything. So the first thing I'm going to do, and this is like, this is old Internet Explorer support. And then or is this one, I don't remember, but I'm getting rid of all the ones I'm not using. So I'm just going to come through and delete every one of those ones that I'm not using. Except here, I went a little bit too far. Let's just delete this because we need a source. There we go. And I can just source it to there and just make sure it's a semicolon at the end. And there's a few different things I want to do because it's not pointing at the right place because I put mine in my assets folder and then in a fonts folder. So here I am going to do the same thing. We have to say it's in my assets. Slash fonts. So we have to make sure we're telling it. It's where it actually should be looking for it. And this is my CSS file in this case is in my root, which is why I'm writing it this way. We could just to be safe, you could do that. So it's automatically looking in your root folder. And that should be good to go. So the source is telling it where it is and the format of that file. The next thing, and this is the one that's really important is this one right here, which is the font family. And this might seem weird, but you know, I just took the bulky slant. It's the first one I opened and the slant is sort of their italic in this font and different fonts come up with different naming and different stuff. But really, my font family is just mathlete, just like that. It's nothing else. This is the name of the font family. It's all of the different ones and I have different versions of this. So often I find they don't give you the best font family to be working in these. So I'm going to switch that. My weight is normal and my font style is normal. And well, this is weird because now I'm in my bulky slant, which is bold italic, but it's saying that my font weight is normal and my font style is normal. We're gonna get back to this in a second. Let's go and look at another one of the ones that we had in there. And this is where it's a little bit weird because let's go to the skinny, so we have the bulky and the skinny. Let's go to the regular skinny, not the skinny slanted this time. And let's go open that style sheet. And you can see it still says font and normal, normal here. And this is where a lot of the time, at least from my experience when we're downloading these, they don't set them up really properly to be used. They sort of do this weird thing like this. So what we actually want to do is we need four of these because I have my four different font weights. So let's just come in and do all four of them. And because I'm setting the same font family on all of them, I want all of these to be my math elite, but I want it to be looking at different places for each one of them, right? So I have the bulky web font. So one of them is bulky slant. Then one of them is just bulky and we're probably changed the order of these. Then I have a skinny web font. So this one could be skinny. And then I have the skinny slant. So we can put the skinny slant here, skinny. Skinny, I spelt that wrong, didn't I? Skinny slant, just like that. Yeah, I think that's good. And well, let's just go and see now. I said we can use math elite. So let's go and actually set that. I'm gonna put it from my H1 and my H2 here and let's just shrink this down. We can get rid of you. We can move that over now. And let's go and take a look at what happens here. If I set my font family to math elite. Oh, it's working. But which one is it? It's using this one. And what happens if I take this one over here and I copy that and I paste it at the bottom? Well, now it's using that one because this is the last one. And these are all, it's using the cascade. These are all just overwriting each other because they're all normal, normal, and they're all with the same font family. But the truth is they're not all normal, normal. So let's, I think the skinny one should actually go to the top. So let's grab those skinny ones first and move them all the way up to the top here. And then I'm gonna have my bulky and then I'll put the bulky italic as my last one, just because for me, I think that makes more organizational sense. And now, so this is my normal, normal. That one makes sense. That's my normal, normal. And then this should be my normal italic. And then over here, I have my bulky. So this one should actually be my bold and my font style is normal. And then this one would be my bold italic and let's hit save. And now look at that. Now we're, we don't have a weird italic coming in for no reason. So that's kind of cool. And that means I have, this is working. My font weight is bold, so it's setting up there. And if I want, I can set my font style to italic and I can switch it to italic or I can switch this to 400. And you can see it gets skinnier. Let's go back to the default, which would be the bold since it's a heading. And you can see that that comes in and it switches it over to bold. So even though they gave it to me in a bit of a weird way, I'm able to come in and do this, which is really, really useful to set it all up with a bit of a shorter name instead of some weird complicated name or having each one of the fonts. Like I really don't like that a lot of these when you download them, they set it up. So each font weight and font style has a different font family name instead of it just being controlled with the font weight and the font style. So I think that's the very, the most important thing that we can do. Now I honestly don't think this font is something that too many people would have installed on their computer. But if ever they did, this could be a useful time to actually, and I think for Google fonts or for other things, this could be a lot more useful. So I'm not gonna deep dive it, but one thing you can actually do on a source is you can set them up a little differently. And you can actually create a bit of a font stack here on the font face instead of doing it elsewhere. But instead of a URL, you can put a local option here. And so what you could say is if they have math leaked locally to use that, and you could also provide alternatives to this, the spelling of something, so say the name of it actually had a space in it, like you might wanna provide that, then you could say that it's local and then whatever. It's not the best example, but maybe it was math, lead and then, or say you had one that was like math, lead, cool font, cool font, you could have it hyphenated and you could have cool font. So it's gonna look for this one. If it doesn't find this on their computer, it would use this. And then if it can't find this one on their computer locally, then it's actually gonna download this. So the advantage with that is you can use a local font first if the font is available. So say you do wanna use a Google font and you know a lot of people have open sounds installed on their computer just in general, then what you could do is you could have it look for that font locally first. If it finds it, it doesn't have to download anything which is super useful. And then if it can't find it, then it downloads it. Or alternatively, you could make this a little bit of a font stack saying look for this font which is really similar that's on their computer. And then if they can't find it, then you can go to this one. So you can make the site load a little faster on, it'd be helpful for avoiding flashes or anything like that of weird stuff going on with the on style text. So I really hope that helps you set up fonts on your projects. And if you're ever having issues picking those fonts which is another thing all together, you can check out Jason's class on Skillshare or I also have a video that takes a look at the easiest way to pick some nice fonts to get your project looking great. So if you want some quick wins on typography, go and check that out. And thank you so much for watching. A huge thanks to my patrons for their monthly support. And of course, until next time, don't forget to make your part of the internet just a little bit more awesome.