 One thing every website needs are fonts. We can't get away with it. We have to use them. And here's the thing, if we aren't adding them right to our websites, we can actually cause a negative impact on the performance and overall load time. So what we're doing in this video, I'm gonna break it down. I'm gonna show you the right way and best practices to add your fonts to your WordPress websites. That's best for performance. So we're going to get a lot of clarity because there's a lot of ways of adding fonts that makes it quite confusing. And here's the thing. We have all these options, but many of those options are the wrong way of doing it. So I'm gonna show you the right way. Plus, I'm gonna show you a trick I use to reduce your font file sizes by up to 90%. That's like taking a font file size like this and turning it into this. All right, let's get started. For this video, we're using Elementor as an example, but this is not limited to just Elementor. The same is going to be applied to other page builders like Bricks and so on. So I have a brand new website that I just installed, a brand new WordPress website. Everything is blank and bare bones. And I just added this page with these little bits of text here. Now, when I went to go test it here on Pingdom, you can see the page size is almost one megabyte. That's pretty big for a blank page with just a few bits of text. And if we go down here to our font, you can see the reason why is that the font file sizes are close to 800 KB. That is really big. Now, if I go back over here to the test that I did the same exact website, but on the page that has no fonts being loaded, you can see the significant difference. This is only 30 KB right here. We don't have any fonts being loaded. So you can see the impact now that fonts could have on low. It could even get worse in this as well. So the first place to start, let's go over to Google Fonts because I feel that most of you are gonna be using Google Fonts. It's what I used in the very beginning as well. We have three ways to add Google Fonts to our websites. We could go ahead and do it the old school way where you click on the fonts you want to install and then you copy and paste this link right here and throw it inside the header. This is how I did it when I first started building websites years ago. The second way of adding Google Fonts would be right inside our page builder or our theme options. They made it super easy and convenient for us to just go in and choose any font that we want here from Google Fonts. And these are the two methods we need to avoid using. There are two reasons for this. First off, well, they're not GDPR compliant. If you're building websites that are gonna be viewed inside Europe, these we should not be using because well, Google collects data from our websites when we do this. So we need to be very careful for GDPR compliance. But the second one and a big one for me is the performance. When we use these methods, basically our website is calling out to Google, asking Google, hey, install these fonts onto our website. So we got this back and forth going and we cannot control the size of the files that Google installs. And that's gonna make a whole lot more sense in just a moment. Now, the right way to do this is gonna be option number three. And that is gonna be installing our fonts locally. So we're gonna go over here to Elementor and you do the same in Bricks or any other page builder thing that you're using that allows custom fonts to be loaded. We go here to our custom fonts and we load it. We go over here to our Google Fonts. If you are gonna use Google Fonts and just download the family right up over here. Now I already have some downloads here. We can see in this download you have all the font files in here. So this is the next part about optimizing your fonts and making sure that everything goes fast. First, we don't need to install all these. In fact, I would install only four to five tops. And the reason is if we go into them, you can see each one of these has a pretty good size to it. 170 KB, you know, 160 KB, 180. This all starts to add up. So that's the first reason why we would not install all these. The second reason is it's gonna make the design messy. The more font styles that we use, the more font weights that we use on a webpage, the messier the design and typography looks. I find that using three to four different font weights on a webpage is best for design plus is gonna make sure the fonts don't get too big that we don't need to load a bunch of different font files. The next thing is let's take a look at which ones to keep. Now, let me go back over here. We have all these here. So which ones should we use? First off, we don't need thin or we don't need extra light. And it might look okay right here at the dark background but these are really hard to read on websites, especially for somebody using a device that has lower resolution. It's not good for accessibility. So I never use thin or ultra light. Now we could use light, that could work. Definitely we need to use regular. This is gonna be a regular body text. Now back over here to medium and semi-bold. We don't need both, all right? Because they're very similar and they're not gonna be used as much. So I would choose one or the other. We don't need to have both of them. And then we have our bolds. We got bold, we have extra bold, and then we have black. Over here, the same thing. I would choose either one or maybe two. Maybe two. Most of the time though, I go with just one of them. Having a bunch of different bolds, again, it makes the design messy. We don't need to use a bunch of different bolds. So the other ones that we don't need to add to our websites are gonna be these italics. So we do a lot of high level design and I find italic fonts are very, very rare that are needed for designs and projects. And the reason is, well, we could use the browser. We could use CSS. You know, all you gotta do is click on italic, the italic option inside a builder like Elementor and you're gonna get the same result. It's going to look very, very similar. You can't really tell the difference. So there's really no need for the italic. Now there are gonna be some very rare circumstances, some situations and designs that might require an italic font file to be loaded. Those are gonna be done mostly when it comes to serif fonts, I really, really do it with sans serif. Maybe a serif font might need it. And if you do need to add an italic font file, count that towards the number of font files you're using. Try to keep that number well under five. Three to four is a really good sweet spot. The next thing I do is I clear out all the ones I don't need. I just delete them and this is what it usually looks like. I'm using five here but most of the time I would just have four. Now that we got our fonts downloaded and we know which ones to add, well, we need to do a few more things, all right? So let's go back over here to custom fonts and let's break something else down because there are a couple things here working against us for performance. First off, right over here, let me go to edit. We can see we only upload the TTF file and that is because, well, that is what Google gives us. They give us the TTF file but we have all these different options right here. I'm gonna quickly break it down. I'm gonna let you exactly know what to use because this confused me for a while. For a while I was loading a bunch of different font files when I didn't need to. All right, so first off, EOT. This is for old internet explorer. If somebody's using an internet explorer on an old outdated Windows 7 laptop, is it really gonna matter if they are seeing custom fonts or not? They probably are not gonna be able to tell the difference. So why jeopardize your performance for somebody who really doesn't care how anything looks because they're seeing the worst of every website already. I would just ignore that one. I've already given up on supporting really, really old outdated stuff. Next up is SVG. All right, so SVG, they're not for fonts. This is more for icons and glyphs. This is super, super rare and I've yet to come across a situation where I really needed it. But if I did need it, it would be something, I mean, think of Font Awesome for an example, you know, like a library of icons. You could use it in a situation like that, but super, super rare. Forget about it, you don't need it. And if you were to add an SVG font file for just regular fonts, that could be megabytes big for just one. It's way too big. Now this brings us to these three and this is where you need to make your decision. So TTF, this is the old school original font file right here. This has been used for a long time and it's going to support all the old devices. It's going to have the best support, but it is going to have the largest file size. It's large. In fact, Google knows that it's too large. That's the reason why they came up with Wolf. So Wolf was Google's solution to the large TTF file sizes. Wolf was created for better performance and Wolf is supported with all modern browsers. It supports even a bit of older stuff and it supports now on Android. Wolf is going to support just about most of the devices out there. Wolf 2 isn't even more optimized version of Wolf. Now Wolf 2 is only going to support very modern stuff. There are going to be some older devices that people might use, maybe like an older Android phone, older iPhones or just some older browsers and stuff. Might have some issues with Wolf 2. But Wolf, this is good enough. This right here works across all modern browsers. And I'm going to go back to my argument. Should we be sacrificing performance to support really old browsers where people really don't care about how things look? That is the options we need to weigh. Now, when it comes to choosing between these three right here, my preference and what I suggest is to stick with these two, Wolf and Wolf 2. The modern browsers are going to load the Wolf 2 and then as a fallback, then they could go ahead and revert to Wolf. TTF, I leave this off just about all websites. I would only add TTF is if a project specifically needed it. If a client knew that their website needed to support older browsers, and sometimes it's a lot bigger, like bigger brands that really need to make sure that their brand identity is clear across the board for everyone. Then I will go over to TTF. But right now, Wolf and Wolf 2, this is what I stick with. This is good enough. Now, I hope this all makes sense because look, I went down a big rabbit hole on this one right here because I really wanted to understand these right here because I felt that I was doing it wrong for a while. Now that we know which ones to load, let me show you my trick on reducing the font file sizes massively. So let's go over here. I'm going to go to Font Squirrel. And then in Font Squirrel, I'm going to go to the Web Font Generator. Now, what I'm going to do here is I'm going to run my fonts that I got from Google and the same works wherever you're getting your fonts from. You can be using custom fonts, you bought some fonts. Whatever you're using, it's all going to work the same. We're going to run it through the generator and it's going to optimize it. I'm going to show you the settings to use to optimize it. Then it's going to spit out a much smaller version. All right, so from here, we want to select on Expert. And this is going to work. Just follow each step because there are some settings here that can't mess up the font, so be real careful. All right, first off, I'm just going to do Wolf and Wolf 2. But for this lesson, just to show you how this optimizes everything, I'll also do the TrueType, which is the TTF. Now, from right here, the TrueType hinting, I'm going to go to Keep Existing. For rendering, I'm going to leave it just as it is. For the vertical metrics, this is really important. Put on no adjustments. I don't want to mess with the kerning or anything like that. Fixed missing glyphs, I'm going to turn both of these off. All right, and then the rest, we just keep it as it is. Now, we got to go back down here, make sure that these fonts, you're able to use them. You're not stealing them or anything like that. That is up to your own conscience and how you sleep at night. All right, cool, so we got it. Let's upload these fonts. I'm going to upload all five of these. And give it about a minute. It looks like nothing is happening, but it is. All right, that took about two minutes. It doesn't look like something's happening. You just got to give it a bit of time. I'm going to go download this. And here are my optimized fonts. Let's check them out. All right, so we got the TTF. Look at this TTF. The TTF alone for the bold font file is 18KB. It was like at 180KB, went down to 18. For the wolf, we're down to 11. And then for the wolf too, we're down all the way to 8KB. Now, I have tested this on lots of different fonts. I love typography, I'm big on it. I've studied it, I've just obsessed over typography for a period of my life. I need to make sure my fonts are good. This flow that I just showed you, I have not found any issues in it yet. So, we are good right here. Now, I'm just going to clean this up right here. I'll just delete the text and the HTML files. Now, I'm going to add the new fonts to the site now. So, let me go ahead and add these. First one, I always like to go in order. So, we're going to start off with three. And I'm just going to add the wolf and wolf files to this. Now, I got all my font files added. I've only used the optimized versions of the wolf and wolf too for the five styles I'm going to use. Now that we got the optimized font and style, let's go ahead and add it to our font styles over here and run a test. This way, we could see the difference right here that this made. I'm going to go over here to my global fonts. That is where I added the original pop-ins file. I'm just going to change this on all my files. Let me change these to optimized font and I'll do it on the rest and come right back. Now, we got the optimized font installed. Everything is good. Let's run a quick test. We're going to go over to Pingdom because it's easy to see the font file sizes with this. Let me go to Web Speed Test and I'm going to test it where I'm at. I'm out in Asia. So, let's run this test. And the results are in and we can see the page size has been reduced to about 250KB, which if we go back over here, you can see it was at almost one megabyte. Now, if we do go down here though and check this out, look at our font size right here. It's only 62KB. That is crazy, crazy small right there. That is awesome. We go back over here. This is what we started with. So, we reduced the font file size by over 700KB. Now, really quick, I did forget one thing and I think it's really important to show you this. So, check this out really quick before we end this tutorial. There's one very important step that we need to take. Go over to your settings, know your Elementor settings. Go over here to Advanced and right here on Google Fonts, make sure to disable this right here. Turn this off. This is a new feature that Elements are added. This helps to protect your website to make sure no Google Fonts are being loaded onto your website. You might build this for a client. They might go in and use that editor which makes it so easy to allow those. But if we go ahead and turn this on right over here and we go back to our builder, let me refresh this. Well, we could see that those Google Font options, we go here. Nope, not there. They're no longer here. It's only system fonts, that's it. Now, I went down a massive rabbit hole on this one because I noticed our fonts were just way too big. On my own personal sites, but also for our client sites. And I was a bit confused about font files for a while. I went down this rabbit hole and I just went down it. And then I did a lot, a lot of testing, a lot of practicing. This was time right here to evolve to get to this point. I hope it helps you out. And if you have any tips on optimizing fonts, maybe you got some tricks like what I do with Font Squirrel, drop them in the comments to help others out. Because all of us, we're all trying to optimize our sites. We want our sites to be fast. And this is something that I know is gonna help out. Well, I hope this helped out. And if it did, make sure to do all that good YouTube stuff. Like, subscribe. It does help to support this channel and I really appreciate it. That's it for this video. Thank you for watching.