Font-Family

[00:00:00]
>> Kevin Powell: Now we've set up some font sizes. Font-family is the next big one. This is really what makes a website. We have the standard serif font right now. It does not look very nice. We want to get into more. I do want to say that fonts in general and choosing font families is a huge topic. It's big enough here on Frontend Masters. There is an entire course dedicated to it, Responsive Web Typography, that's right there.

[00:00:23]
So if you do ever want to dive into it, when you're done with this, you can go and check that out. There's things like different file types. We're only going to be looking at one in this course. There's performance issues that come in with bringing in custom fonts. There's font stacks which we're going to be touching on. There's FOITs and FOUTs. There's one with an I and one with a U, FOUTs and FOITs.

[00:00:45]
There's tons. It's a massive topic. We're keeping things simple for now, just to get the main things covered, which are the different types or categories of fonts, font stacks, and font-face, which lets us actually set up the fonts that we want. Just so we're all on the same page with the vocabulary, the types or categories of fonts, we have serif fonts, sans serif fonts, monospace, those are the big ones.

[00:01:07]
These all have subcategories where you can get into more stuff if you want to get into typography. A serif font is when it has these little things sticking off of it, those are the serifs. A sans serif doesn't have those. Sans is just French for none, so it's like non-serif font, meaning you cut off all the little dangly bits. And then a monospace font is just saying every letter takes up the same amount of space, we all use those in our code editors.

[00:01:33]
So we tend to be familiar with monospace, if only for that. There's a few other font families or default ones we can set, such as cursive and fantasy, but we're not going to worry about those. We're going to stick sort of with the most popular ones are serif, sans serif as we go through it. To be able to declare one of these, we are declaring a font-family. So font-family, then you say what font-family do you want?

[00:01:58]
We can say sans serif. It changes it. Let's do that really fast on our project, just so we can take a look at what that will actually look like. So once again, it's font related. I probably want to put that on my body, so font-family, sans serif. Looks more up to date already, though maybe not the style you want, but you can see that a nice quick change right there on the font-family. The thing with fonts, other than using these generic keywords, serif, sans serif, cursive, if you wanted, fantasy.

[00:02:34]
You get into the world of font stacks. The reason we have font stacks is if we look at this text, I told the browser this is, yeah, I told the browser it should be using a font-family called Aperçu. It's a really nice sans serif font, but right now it looks like a serif font. And this is just being rendered. We can take a look in the dev tools at this. We should see it on, I think I did it as an inline style even, just to show that it should be working.

[00:03:06]
And there it is, the font-family on that is set to Aperçu, and it's not a sans serif font. The reason for that is my browser doesn't know what the Aperçu font is. It can't find it on my computer, so it gives a shrug and it just goes to the default of my browser, which is Times New Roman because I'm on Windows. If you're on a Mac, you have a different default. So if you're on the page right now, it's possible this text here looks different to you.

[00:03:32]
This is where font stacks come in. Actually, I want to keep the dev tools open for this one. This is where font stacks come in, where when we have something like that, can I change that down here? I can. The browser doesn't know what this is, so you can build in backup fonts for it to use if it can't find this original font. So if I come on here and I can get Futura, if you're on a Mac, this will probably work.

[00:03:56]
Futura, if you try adding that there. For me it doesn't work because I don't have Futura on my computer either. Most Macs have it installed by default. So all of a sudden on Macs, the browser or their font looks decent, whereas for me I still have this default one coming in. So then I can add another fallback and sans serif. And then finally, it switches over to the sans serif that's here. This is sort of the opposite of how CSS works.

[00:04:24]
Normally CSS goes in order, starts at the top, takes the last one, last one wins. When you're doing a font stack, first one wins, that the browser understands. So, can I find Aperçu? Yes, use it. No, try Futura. Did I find it? Yes, then I'm going to use that. If I did not, then I go to the next one in the list and it'll just keep falling back. If it can't find any of them, goes back to the default font in the browser.

[00:04:48]
Now, some people may say I don't need to set a font stack. I'm setting a custom font, I've put it in my project, we're going to be seeing how we can do that. The problem is sometimes slow internet connections mean the font doesn't load in. So having a fallback font is really important, even if it's just one step along the way, you do still want to have a font stack that's there. Another one that I just want to mention really quickly is my go-to font-family for demos and other things is system-ui.

[00:05:17]
System-ui is going to be a sans serif font all the time. It's a really nice looking one, so you can definitely use it for most things you're doing. It will be different between different browsers because it's using the system's UI font, but that means if you're on Windows, it's going to be Segoe. If it's the newer Windows, I forget the older ones. If you're on Mac, it's going to be San Francisco, so users will get different experiences, but you know it's a nice looking font because it's the one the browser or the one the OS is already using, which tends to be nice.

[00:05:47]
Linux, I think, uses Roboto, I could be wrong on that one though, I apologize. But everyone has their own font they'll be using that looks decent, and it's installed on the computer. You don't have to worry about performance. It's going to work really well. So it, and the users will also be familiar with what it looks like because it's their system's main font, and the user can change it if they. Yes, that's true.

[00:06:08]
If the user changes their preferences at the system level, that will change the system-ui font. One of the reasons I brought it up is because some people have found problems with system-ui when it comes to internationalization, when there's translation of pages going on. So I did include this link here for System Font Stacks from CSS-Tricks from a little while ago. So it talks about what the different fonts are, but if you go far enough down, there's a few font stacks that they've looked at, like there's the GitHub font stack, WordPress font stack.

[00:06:39]
There's a few. They're basically set up to make sure that in internationalization situations where there might be changes in language, there's not weird hiccups that happen along the way. So it's going to try the Apple system font followed by the BlinkMacSystemFont, followed by, you know, it goes through the list of system fonts essentially. This is like system-ui on its own is essentially doing this, but there's been a few little weird things along the way.

[00:07:02]
So it might be safer and these big companies have done it, so you might just want to come in and grab one of these font stacks. Just a really quick one, if you don't know what font you actually want to be using, that you can jump in and use one of those.