The Problem with Google Fonts (and how to fix it)

Google fonts really is amazing and you're probably used to just grabbing one of these funds and then just declaring hey I want this one right here grabbing this and adding it to the head of your HTML the only trouble with that is two things number one you don't get the speed that you get if you upload your own custom font and make sure that you're doing it with modern font stacks and secondly you also have to worry about the privacy and security concerns with using Google fonts there's actually some legal challenges to Google fonts being used throughout the web that require you to do some stuff legally so how do you get around those or how do you adjust for that well that's what I'm going to show you today how you can set up your own font face that you load up for users and if you stick around to the end I'll even show you how you can declare a local font file so that it will use whatever's on their system first and then only default to what you're uploading if they don't have it on their system thank you hey what's up my name is Chris and welcome to coding in public I will include a link to the finished code here on my GitHub when we're done but you can see right now I've got a pretty nasty looking site and I actually just had chat GPT spin this up so I'm sure the CSS is kind of bad but here we go we can add something up and running so that we can actually work with it now what I'm going to do first of all is download a font now you can't come over here to Google fonts and just like download a family for instance and then add that to your project what I'm going to do instead is come over to another site called font share that has some free fonts that you can also use and let's just find how about this one right here this Switzer one or Switzer and I can just download the family you do have some font licensing things you need to pay attention to depending on what you download but now I've got this downloaded and let's go ahead and add it to our actual project so I'm going to open up my sidebar over here we're going to add a folder here and this will just be called public and then inside here I'll have a fonts folder now basically this needs to be at the root of your directory wherever you end up publishing your final build so the root of your server so a lot of times build systems will have a public directory that will basically add all those files to the root of your server when you're done building but for now we're just going to mock it up like this in a relatively reference that so next I'm going to go and grab those fonts and I'll drag them in give me just one moment all right so I've got all these here I'm just going to drag them in and out of the very many fonts that they gave me I went into the web fonts and the folder from that downloaded font file there and you can see that I've grabbed a couple different versions of the bold bold italic italic and regular basically these are different font types and wff 2 is the most modern one and usually the smallest that's basically the difference between these font types but you can see here I've got three versions of each so that we can basically fall back if a browser that visits our site doesn't support it so now that I've got these let's go ahead and secondly declare a font face so if I come over here just in my CSS up above where I would use it I'm going to say font face and vs code actually gives me a little start right here but what I'm going to do is pull up the MDM docs just so you can follow along yourself you can see here the first thing we have to do is is declare this as a family name so if I remember correctly this was called Switzer or something like that I can call this whatever I want because basically it's just what I'm going to reference in the body down here below then you'll notice next I had gone SRC and this is required and I have to actually give it a single one or a list of different items they can load now for right now we're going to ignore this local one and just look at the URLs basically it's going to start with the top one and try to download that and if their browser doesn't support it it will fall down the stack so let's go ahead and say what I want is to download just the normal one so I'll do a relative path in my public directory and then into fonts and then finally let's just grab the regular and let's start with the wff2 since that's the one I prefer you also notice that you can declare a format that says the type of file it is so we'll say format and this will just be in quotation marks here w o f f 2. so this is going to be basically my default type now the other thing I need to do is tell it basically what weight and what style this font family is and if I were to come over here you can see that so I've got font style right here and I've also got font weight so we'll say font style first of all so my font style for this will be normal and then font weight I can call this whatever I want so for instance I could say 400 or 600 obviously you want it to be somewhere close to what you're using you could also just say normal as well but let's declare this as something like 400. so what I've done is I've grabbed just my regular type I've only given it one of the three different versions We have to start with and I've said this is my normal style so it's not italic and then I said here's the weight so this is my standard weight so what I can do now is come in here to the body and say font family and this will now be set to my Schweitzer or Switzer whatever that is so if I jump back over this way you'll see that this is now actually being pulled in it's only ever using the wof-f2 and it's also only ever using the 400 weight or this this font face declaration so just to show you what this would look like if I comment this out there's the ugly one and this is the nice one now you do want to give it some kind of fallback Sans surf is at least a basic version so it starts with this and then downloads this and swaps it out as it needs to usually you also want to provide other ones that they might have on their system as well but this is at least a starting point for fallback stack now to make sure it's actually coming in I'm going to open up the dev terminal click on network and make sure font is selected then I'll refresh and you'll see that it is actually being pulled in tells you the size how long it took nine milliseconds not too bad so it pulls all this in now let's look at a couple other things and then we'll declare different versions like for italic and bold and all that so let's come over here you'll notice that not only do we have a font weight and a font style but if I move back up the other thing I mentioned is that you can give it a fallback stack so what I'm going to do is actually grab this right here and just add a comma and then we'll just add two more here and I'm going to add this as grabbing the first one hit command D and erase that to just say w o f f and then we'll do the same thing here t t f and those just correspond to the names of the files I have here generally speaking this is the smallest the next smallest and this is the largest the the browser support is really good for this and for this so you'll probably almost never load this and and you'll notice that if I come back over this way I open back up the network Tab and I refresh it's still only going to download this one because it actually works on this browser so these never get run so you're safe to add as many fallbacks as you need knowing that only the ones you actually use will be downloaded okay so now we've got a browser stack fallback we've got this font family set it's being used in our body we've got our normal style our font weight how do we declare this as like an italic version of this what I'm going to do is come over here and we'll do actually let's just copy this down right here so I'm going to copy all this down in addition to the regular we also have an italic version so if I grab this first regular double click on that hit command D command D command D and I think that was just called italic yeah italic like that now all I have to do is switch this out and say that this should be my normal weight that 400 with an italic font style you see that this actually gets pulled in here and is now working properly now I can do the exact same thing for my bolts so let's go ahead and copy this down and we'll do the same same thing so in this case I'm going to change this all these to bold because I think that's what that was called yeah and then the next one right here these are all going to be called bold italic now in order for the browser to know which one to select I need to give this a different weight I can just actually declare this as bold and whenever I use that declaration in my CSS it will use this font face and this font face depending if it's italic or not or it can also give it an actual number like 700 and 700. now if I come back over this way and I refresh you'll see that it's pulling the Bold the italic and the regular I must not have any bold italic anywhere in the site and that's something else to note that it will only actually download the font when it needs it and evidently those are the only three I'm using so this one's never being used right now a couple other things to note here this font weight right here is important so if I come over here and I call this something like I don't know 200 perhaps and then I jump down here and I say the font weight needs to be 200 then you'll notice that it basically uses that same font because all it's doing is saying hey which font weight should I use and it looks up here and since the font family is inherited it's already knows to look under Switzer it finds it up here and says hmm this is 200 I'll use this it doesn't care what the file name is called or anything like that same thing here so let's say I changed this to I don't know like pizza all right so if we change this to pizza right here and I change this to Pizza you'll notice that it's still using that because it basically says hey I'm going to look for the pizza one it doesn't really care what the file is called so all those naming things are important okay so one other thing to note and that is that you can actually default to a system font on their machine so I'm going to install Switzer right now on my system and then be right back with you all right so I went ahead and installed it on my machine I'm going to open up my network tab over this way and then we'll refresh you see all three of those coming in now I happen to know that if I were to jump over here this Switzer right here is installed using font book which is how you install it on Mac OS but I've got a bunch of different styles regular italic now the only tricky thing is you have to kind of guess exactly how this will be installed on somebody's machine so if I'm pretty sure this is going to be called the regular I could come inside here and just declare a local and then this would be the name I think it'll be called which is Schweitzer normal now let's see if I guess to that correctly or regular I think that's what we said regular okay so let me come back over here and you'll see that now it's not loading that because it's actually using my system font instead so same thing if you know that this is going to install this down here and you think this is going to be called italic now I can refresh refresh over here and now only the Bold is being pulled in one more time let's go ahead and switch both of these out as well and down here I think this will be bold italic and we'll save and refresh and now no fonts are being downloaded because I'm saying hey if they've got this installed and it's named exactly this use this instead otherwise fall back to these as well it is important that this goes first because it will try to use that local font first so that's how you declare your own font faces now we have gone ahead and grabbed one two three and four different fonts that they have to download there is another way to use fonts and that is to use the more modern variable fonts if you're interested in that let me know in the description I'm happy to do a video on how you can use variable font faces in your website well thanks for watching I hope this was a big help I'll catch you in the next one happy coding

Channel: Coding in Public

Views: 7,855

Keywords:

Id: lksnr4e-npo

Length: 10min 25sec (625 seconds)

Published: Tue May 30 2023