 Hi there my friend and friends, using nice fonts is a nice way to make our website look a lot better, but they can actually cause all sorts of problems such as fouts and foits, which are basically just fun acronyms that we use that mean that your fonts are taking too long to load. And whichever one it is, they're annoying for your users, and they aren't great for your lighthouse scores either where you can get dinged for things like your largest contentful paint and cumulative layout shifts. So how can we improve the typography of our websites and use nice looking fonts without worrying about those things? Well first up, stop using Google Fonts. I know you are, we all do it, and it makes it easy, and there's a ton of them that you can use, and a lot of them are really nice. But grab a few too many weights and it starts to slow things down, and then there's GDPR issues if you're in Europe, and yes, you can also self-host them to get around that issue, and also potentially improve the speed without that much work. And I've actually looked at that in a previous video on how we can self-host Google Fonts, but we're devs, meaning if we can copy and paste something from Stack Overflow, we're probably going to go that route, so who wants to go through all of the trouble of self-hosting Google Fonts when there's actually a much easier solution. And that solution is using the system fonts, of course. Our computers, phones, and tablets all come with tons of really nice fonts on them already that the users don't have to download, and that means not slowing anything down, and don't run away yet because I'm not going to suggest using some of those classic font stacks that all basically look like crap. Modern computers have a lot more choices than we used to see in the old days, and my absolute favorite one? System UI. Let's look at this quick example just to take a look at some of the improvement system UI make. So here's a website where I haven't done anything. I'm on Windows. This is the default font, which is Times of All Things. But if we come in and we add a font family here, let's go with the classic of just a Saucerif, and we can see what the Saucerif looks like, and I guess it's okay. It's fine. But if we come here and we replace this with a system UI, look at how much better that looks. Everything's just a little bit more clean, and it looks a little bit nicer. On Windows, it's using the segue, segue, segue, I don't know how to say it, but it's a much nicer font, and if you're on a Mac or a Unix system, it's going to look better than whatever the default Saucerif is. Now I already know that someone is typing away furiously in the comments to let me know that support for system UI is not perfect because, of course, someone is. And yes, I know it's like a whole half percentage behind the support for something like Flexbox. So of course, that's really important that we have perfect support, but of course, it is true. We don't want things falling back to something terrible because if we did say come here and, you know, if the person didn't have system UI, so the browser wouldn't know what that is, it would fall back to this if you're on Windows, and that is probably not what you're after. So in this case, we'll enter the font stack where we have our system UI, and then we do the Saucerif as our fallback. And that just means that if this doesn't work, then we get the default Saucerif instead. And, you know, that's the whole point of font stacks in general is, you know, if the browser doesn't know what this is, we fall back to this one here instead. And, you know, let's just say I came in here with my awesome font. As an example, we'll see that it all shifts a little bit because it's going back to the default Saucerif rather than the system UI font that we had because it has no idea what this one here is. Now you might actually see some stacks. If you look up system font stacks or something like that, you might actually see something that looks like this instead. And this is just because it's going through the exact same thing as using system UI basically. We have the two different Apple system ones that are coming first. Then we have the Segway UI that I mentioned, which is for Windows. Then we have Roboto, which is for Unix systems. And then we go to the Saucerif fallback. And you'll see other ones like this that actually start with system UI and then include all of this afterward as well. If you did this, again, it would help browser support slightly. So if you want to try and make sure that you're not falling back into just the default Saucerif, you could definitely do that or you could just stick with this, which is what I do for most of my things. Because as I said, supports at over 97% support and worst-case scenario, someone on an older system gets the Saucerif and I'm not too troubled by that, but it's completely up to you if you want to go with a longer one and it's completely fine. And at this point, that person that was going to be complaining about browser support might now be instead complaining that we're not getting the same font across all systems because as I just looked at the system UI font is actually a different font family depending on what system we're running, whether it's a Windows computer, a Mac, or if they're on Unix or Linux or whatever. And yes, I know that that is actually true and I don't think it's actually a big problem, but we'll talk more about that in a second because honestly for like any personal project you're doing, guaranteed you this is perfectly fine. And of course, it has the advantage of being blazingly fast on all computers because there's no files to download. And of course, it looks pretty good. And there's another bonus that comes with this too. Speaking of speed is you get access to pretty much every weight from 100 to 900, which you do not get if you're using Google Fonts unless you don't care about user experience at all because you're just loading up on all the fonts, all those font weights and making things really heavy. So for example, let's come on to my H1 here and say the font weight is actually 900 and you're going to see it gets thicker. And for fun, let's come on my... We'll go on the H2 here, I guess, and let's just say the font weight is going to be 100 and it's going to get really nice and skinny. Now, it does depend a little bit on the system here too. So there could be a little bit of an discrepancy just because the 100 in this case isn't a true 100. It's actually falling back to the 300, but you probably don't want to get lighter than that anyway. But you can see we have the 300. I have the 400 coming here. I have the 500 coming in here. I have the 600 coming in here. We can go even bolder and go up to the 800 or as we saw, we can even go all the way up to 900 and get like super extra bold. So then another, as I said, bonus here is no more having to worry about sacrificing font weights when you're picking from Google Fonts. And maybe you're one of those types of people who likes to be a little bit different and you want to use a nice classic humanist font on your portfolio and maybe even pair it with a neo grotesque font. First up, that is a terrible font pairing and you might want to rethink things a little bit, but even if you do want to go with that or maybe some other better combination of fonts, I have this beauty of a website called modernfontstacks.com. I probably could have just led this video off with this and made this entire video about 20 seconds long, but YouTube loves watch time. So please watch until the end and then go and check out this website. It covers basically all the different styles that you'd want to be able to get on your website, but it includes robust font stacks for all of the different styles. And the cool thing with this actually is it gives you a preview of what these are actually going to look like on every different system. So if you do want to tweak things, you could. For example, let's go to my favorite one, which is my system UI here. And if I just click on the little eye icon that's next to the name, it brings me over to a GitHub repo where everything is and it shows me what they look like on the different browsers. And so here we, you know, here's the Mac OS version which is using San Francisco, the Segway UI, Roboto, Ubuntu, Cartel and NatoSans. Again, all depending on which one's coming in and you can see the line lengths are a little bit different because some of these are a bit narrower or a bit wider, but generally they all look really, really similar. And with that idea of them all being different, guess what? Nobody actually cares, right? No user is going to go on their phone, maybe they have an iPhone and they go on your website. And then later in the day, they go back to your website but now they're at the library and they're using some old Windows 7 machine at the public library or whatever and they go back to your website. Nobody is going to go, oh, I think the Saucerif on this website has changed, right? They have no idea. Again, maybe that person I've been talking about this whole time that likes to complain, they're going, my designer cares. And first of all, you could just tell them that no one does but no, I guess I'm a bit kidding there that people, designers care about their typography but even everybody's favorite framework Bootstrap is using the native font stack for all of these. You can see right there starting with the system UI at the top and I'll even zoom in to make that a little bit more obvious right there. And what's that? Nobody's using Bootstrap anymore. Everyone's just using Tailwind. Oh, well, that's also the default for there as well where they actually, we have the Saucerif and Mono all using the UI as the default. The UI Saucerif actually falls back to the system UI here. The UI Saucerif, UI Serif and UI Mono space are only supported on iOS and Mac OS. So we do fall back into a few other things after that but it really does rely on the idea of using system fonts here as well. And if that's not enough to convince your designer maybe there's GitHub that also uses it. You can see right here it's their main font family. There's also Stack Overflow that happens to be using it as well and just like Tailwind actually they have the Serif and Mono ones set up there as well using system fonts and there's just a ton of websites using it. This is one page love that has 109 examples of websites that are using the native system UI typeface. Just as an example, heck, I even used it for my website here for my newest course beyond CSS. If you're interested, the link is in the description but maybe the best point here and the one that makes the most sense is WordPress and whatever you think of WordPress it doesn't really matter what they did here. You can see they have the font family on their body of the default font stack here using the system fonts and we'll circle back to WordPress in a second though but I do actually think that if you're working on a large team and there's lots of font stuff going on and all of that, showcasing large websites that are actually using system fonts could actually be a good starting point with your design team to just sort of mention like hey, if it's good enough for them and because page speed is so important it could even be something that you bring marketing into it a little bit and you could even show them case studies on how faster page speed loading times and all of that leads to more conversions and I'll put a link in the description for more stuff on that as well actually and by mentioning all of that you might be able to get some people to listen but circling back to here on WordPress specifically and I just want to focus on like the title up here because I think this is an interesting approach they've done where if we look specifically at the heading here you'll actually see the font family is this recoleta web they're using a web font here and to me this is probably a nice way to do it right you have your branding coming through on anything that's a larger font size that people are actually going to notice you can give yourself that personality and all of that and then when you need to saw Sarah for your regular body texts that's size 16 or 18 or whatever it's going to end up being nobody's going to notice if it's one saw Sarah for another one so I really do think that's a really nice way to compromise and still get that personality and those better fonts and interesting things going and still get really fast page loading time because you're only needing to bring in one font with maybe two different weights and that handles all your headings and then your body does everything else and if you do decide to go that route but the font you want for your headings is a Google font and you really want to self host it whether it's for speed reasons where you can optimize it a little bit more or because you don't want to have to worry about any potential GDPR issues I have talked about that in the past and that video is right here for your viewing pleasure and with that I would really like to thank my enablers of awesome or Johnny Tim Simon Andrew and web on demand as well as all of my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome