Why You Should STOP Using Google Fonts (And How to Self-Host Your Own Web Fonts)

if you've ever made a website before then there's a good chance that you have heard of and used google fonts and for good reason google fonts is a very convenient and easy way to add web fonts to your website so instead of being limited to just some basic fonts you can really get creative with a whole bunch of different free fonts on here but as nice as google fonts seems there are a few issues with it that you should know about and the first is that google uses google fonts in order to track your users on your website so these are free not out of the goodness of google's hearts but you know that google is an advertising company and it tracks users across the internet in order to serve them better targeted ads and so when you link to google fonts and website you're giving them information about your users at their phoning home and if you're like me and the idea of google stalking the users on your website seems a little bit creepy then you might not want to use google fonts it's not great for your users privacy and i don't like the fact that you're being tracked wherever you go on the internet by google i just think that's very creepy i don't want google to know that much about me so the less information i can send back to google the better but even if you don't care about that even if you don't care about any of the moral and ethical arguments you should know that google fonts is just going to be slower than hosting your own fonts on your own website that's because whenever you link to google fonts on your website what google is doing behind the scenes is it's downloading some css right here and once google downloads the css that it needs for the fonts it has to connect to a whole different server gstatic.com in order to actually get the fonts so when you're loading in fonts from google it has to connect to an additional two servers just to pull down the fonts and each of these connections is going to take time and it's just going to make your website a little bit slower than it could be if you had just hosted the fonts yourself so if you host the fonts yourself then as soon as the html is loaded then it'll start loading in the fonts as well so it's just going to be much quicker in almost every case in order to load your own fonts rather than connect to google servers but you might have heard that google fonts are supposed to be a lot more performant than hosting the fonts yourself that's because google caches the fonts and so in theory if you cache one font then you should be able to use it on any different website right and so in theory you would build up a cache of all the popular google fonts over time and once you have them all cached then you wouldn't have to load them again once you navigate to a new website and that may have been true in the past but actually the way web browsers are set up these days is they actually have a separate cache for every single different website as for a few reasons mostly privacy and security so safari did this a long time ago for privacy reasons and now chrome has also done this starting in i think 2020 so that argument just doesn't work anymore you're not actually seeing any performance increase from cashing them because the cash for every single website is going to be different it's going to be separate but all you need to know is that google fonts will have to re-download the font every single website that you go to so hopefully i've convinced you by now why you shouldn't really be using google fonts anymore and why you should self-host the fonts yourself but you might be thinking that it's going to be a lot of work to set up a lot of hassle and it actually isn't and that is all because of this nice little tool right here called google web fonts helper now i will leave a link to this because it is a very useful website and it basically functions as google fonts is going to have every single google font over here on the sidebar you can search for them here and then it'll have links to download the fonts it will have all the necessary css that you need so it makes it very easy so let's actually open up this website that i have here it is a very basic website with just a bunch of text on it and as you can see right now i am using a few different google fonts and this is just the code that you would get from the google fonts website but let's see how we can host our own fonts and get rid of these google fonts right here so let me actually just delete these right now and as you can see it will revert to the system fonts and as an aside if you don't really care about how your website looks that much if you're okay with kind of these system fonts because the fonts that i have on my computer already they don't actually look that bad so a long time ago maybe all the default fonts would be arial or times new roman and they look really bad but a lot of system fonts have come a long way and so even some default text like this is going to look pretty nice and i have a whole other video on this if you want to check it out but if you want to make your website even faster and not load in any additional fonts then you can just use the fonts that are already on your system right here i'll leave a link to this in the description as well so what you can do is just copy the css right here and it will give you pretty good system fonts on whatever system you're on windows mac os android something like that if you don't care that much about having a specific font but let's say in this instance we do want a specific font let's say we want the font montserrat and the font open sans for the body so we can get these fonts from this google web fonts helper let's search for montserrat we can go in here let me just make this a little bit larger so you can see and inside here you're going to want to select all of the weights that you want this is going to be pretty similar to something like google fonts you just select which weights you want and i just want the bold one right here the 700 and so you can then scroll down and you can copy the css right here now i would actually recommend using this modern browser right here because most browsers will support these formats right here so you would use best support if you want to support really old browsers and i do mean really old browsers like even older than internet explorer 11. so i'm on can i use right now and if you select modern browsers then this will work in all of these browsers i think the only one it doesn't support is opera mini but 99 of the time is going to work and i really don't need to support internet explorer 8 if for some reason you do then you can use the best support but for me i always use modern browsers but for now let's just use what we have here so let me copy this right here and then you're going to want to download the files and this will download a zip file to your computer with the fonts that you have selected and i also did this with open sans so i'm not going to go over that again but you're just going to want to extract the fonts from the zip file that you downloaded and then put them in say a fonts folder inside your website directory so i have the montserrat font and the open sans font in waf and waft2 for best compatibility and once we have those fonts somewhere inside a project then we're going to want to link to them let's open up the style sheet of my website right here and so the css that you copied from the google web fonts helper you're going to want to paste in at the top of your document here so we have open sans and montserret right here and that's basically it for all the work that you have to do now we can go check our website and as you can see now we have the montserrat font here we have open sans down here and you would just reference those down here in font family so i just put open sans at the beginning here and then for headers i put monster at and it's as easy as that to be honest now there are a few other small improvements that you can make so if you want to learn more then stay tuned because while this works pretty well you will notice that if you're on a slow connection uh let me just simulate a slower 3g connection so put this on slow 3g reload this and look at this as it comes in so so as you can see right here the old font is coming in first and only after it's loaded is the montserrat font being loaded and you might think that this looks kind of bad it looks a little bit jarring for one font to load first and then the other font to come in later and so there's a few different things that you can do to kind of fix this problem one solution that you can use that i do not recommend at all is you can change the font display property you can set it to block so what this will do let me just set this to open sands as well this will actually hide the font until it's actually loaded in so as you can see there's just a blank page until the font actually loads in and you might think this looks better because you don't have the jarring font switching but i would really not recommend this as it has some accessibility issues and also because if something goes wrong whenever it's loading the font just might not load at all and your visitors might be stuck with a completely empty page with no text because the font wasn't able to load so i don't really recommend doing this at all i would set the font display to swap and this will have the same behavior as before where it shows the system font before it actually loads the web font so we do still have this flash of unstyled text is what we call it in the business and it still looks a little bit bad so what you can do in order to speed things up a little bit is you can basically tell the browser to prioritize loading the fonts first if it's really important to you that the fonts load first then you can add this line right here inside your head in your html and what i'm doing here is adding a link tag it has a rel attribute of preload so basically we're telling this to preload or load this before almost everything else we're leaving a link to the font right here set the as attribute to font and then finally put in the type font slash waft2 or waff whatever you're using and cross origin and once you do this you're basically telling the font to load in before almost everything else maybe even before images so if i reload this then you're going to see that the flash of unstyled content is much briefer than before so that can look a lot better if you really don't like the idea of having a flash of unstyled content that will make it very brief and it does look a lot better but you do have to weigh the pros and cons in that it will make the rest of the website maybe feel a bit slower to load because it is loading in the font first not the images or anything else so maybe just play around with this and see what works on your specific website maybe just having the font for the body load faster is more important than having the font for the headers load faster so maybe you can just delete that and then the body font will load faster than the header font just play around with it to see which works for your use case i think in my case i would just do something like this like only preload the body font otherwise it could be slow if you're pre-loading a ton of fonts up here that's basically all there is to it so as you can see here in the network tab we're only loading in the fonts that we need so we're only loading in the waff2 we're not loading in the waff and so whenever you include both of these fonts in here it will only pick the font that it actually needs so as our browser can support the waff2 format then it's going to load in that otherwise it's only going to load in the waf format so you aren't going to have any performance hit there and in my experience this has been a lot faster than google fonts so you can look up different articles where they test google fonts versus self-hosted fonts but just as an anecdote whenever i switched a recent project that i was working on from google fonts to self-hosted fonts it did improve the performance by half a second which is pretty good for not much work at all it's a little bit more work than google fonts you have to go to google web fonts helper but really it's so easy that i think everybody should be going ahead and doing this plus you're predicting your visitors privacy as well so it's a win-win on all fronts so that's why i think you should ditch google fonts and self-host all your fonts from here on out so your website visitors will thank you because your website will load faster and plus you get to stick it to a giant evil corporation and what could be better than that

Channel: Eric Murphy

Views: 11,344

Keywords: fonts, webfonts, google fonts, google, performance, web performance, pagespeed, speed, lighthouse, optimize, google fonts wordpress, css, html, preload, prefetch, load, self host, selfhost, host, woff, woff2, google webfont helper, tutorial, guide, 2022, google fonts vs self hosting, custom fonts, ttf, otf, open sans, montserrat, best google fonts, swap, font-display, fouc, fout, foit, web fonts, website, web design, web development, privacy, cache, google font, wordpress, safari, chrome, eric murphy

Id: 363s_ziVwTg

Length: 11min 55sec (715 seconds)

Published: Wed Feb 09 2022