Font-Face

[00:00:00]
>> Kevin Powell: But often we don't want System UI. We want something that looks a little bit nicer than that. So that's where the font-face declarations come in, where we can actually declare a specific font that we want. It's coming from our project files or design files, anything like that. Google Fonts is easily the most popular place to come and get fonts. There's tons of them, they're all free to use. There's decorative ones and creative ones.

[00:00:20]
There's very standard ones. There are GDPR issues around using the hosted version of Google Fonts. So if you're doing personal projects, you probably don't mind, but if you're, especially if you're in Europe, you might not be able to. I have linked to an article that talks more about it right here if you want to read up on it. Doesn't mean Google fonts are bad, it just means that using Google to host the fonts can potentially open the door for GDPR issues.

[00:00:45]
And there used to be a performance benefit that's been gone for years now because they used to cache the fonts. But now there's no cross-site caching, so the performance benefits there are out the window anyway. They do have their CDNs which are probably good, but it's good practice just to host your own fonts. So we're going to do that for our project. In general, your fonts, you're just going to have a fonts folder where you're going to save your fonts into, it's the easiest thing to do.

[00:01:11]
And then we have these font-face declarations. Font-face declarations look a little bit strange just because they start with an at symbol. These are called at rules. We're going to have a few of them. And importantly, they do not go inside of other selectors. These are global settings that we have outside. We're going to break them down and talk about them as I set up the demo for this. The one thing that's really important, we're going to see this when we download our file, we do need to set it up individually for every font we have, which means the weight, italic, anything like that is a separate font file unless you're using something called a variable font.

[00:01:48]
I'm not going to get into that. Variable fonts are a single file, a little bit heavier, but they include everything in them instead of having to have multiple files. Again, we have that course that I mentioned that does talk about variable fonts, so you can check that one out. In the case of our project, I put a link down here that you can use. All the way at the bottom of the font phase lesson. Where we can go, it's Overlock is the font that we're going to be using.

[00:02:15]
So on Overlock, I can click this big get font button and it gives me two options. I can get the embed code, this is the one that you let Google host it, you're not worrying about it. You copy that, paste that into the head of your document, and you can start using the font. We're not going to do that. I want to show you how we can use the font if we download it. So download all, you only need that.

[00:02:42]
Open the file. Unzip the file. No, not compress the zip. I want to unzip. Where's that? There it is. Extract all. And it gives me all these files. As I said, every single font-weight within there is a different, so I have black, black italic, bold, bold italic, italic, and regular. For this project, I'm only going to use these two. It's important that you don't just bring all of them in. Every font that you're using, they're not that heavy, 37 KB, 44.

[00:03:13]
But if you're bringing in a bunch of extra fonts that you don't actually use, I'm not sure if it would actually get downloaded or not, but I would just suggest only bring in the individual files that you actually need to be using, just so you don't run into the risk of downloading extra files, slower connection, again, fonts are one of the big causes for performance issues on websites. So I'm going to take those two, and the easiest thing to do is in my project.

[00:03:45]
I can just create a new folder here, so I'm going to make a folder called fonts. And you can just drag your files directly into there, so I can get the two that I want, drag it into VS Code, and it will copy them into my project. If you feel like you need to rename them, you can definitely rename them, but you don't have to. Most of the time when you have font-face declarations, they'll just go right at the top of your file.

[00:04:12]
So, all the way at the top, I'm going to write at font-face. Again, it does not go inside a selector. At rules in general will not go inside selectors. There's nesting and stuff that can change that a bit, but if you see an at rule, it means it shouldn't be selected, it's at this global side of CSS. The first thing we do is do a font-family. The font-family here is the name of the font. You get to choose what you call it.

[00:04:42]
The font is Overlock. I can call it Overlock. I can call it ABC if I wanted to. The name is really up to you. It's how you want to be referencing that file when you're using it down in your rules below. So if I called the font-family ABC down here, I would say font-family ABC. I'm going to call it, as I said, by the actual name of the font, which was Overlock. It's not in the lesson files, but if your name, if the name of the font-family doesn't have a space in it, you don't have to put quotation marks around it.

[00:05:16]
If it was something like Overlock, I don't know, something, something. If it had a space in the name of the font, which some font families do have, you'd have to put quotation marks around it then, or the browser, you run into problems with the browser. So you could just say always use quotations and then you'll never run into an issue. It's up to you. So why don't we do that? We'll be safe. I'll say the font-family is Overlock.

[00:05:42]
The next step is we have to tell the browser where it is. And we do that with a source, just like you would with an image. Again, is it an href, is it a source, we just learn over time and doing it that you're going to be using source. The source uses a URL to tell it where it's going to be, and this is always a relative path. So I'm inside my styles file right now. I need to step back, so I put two dots, oops, we clicked over there.

[00:06:17]
Two dots, go back a step, forward slash, and then I want to go into my fonts folder. Fonts, and then from my fonts folder, I'm going to get my file name, which is Overlock regular.ttf and that is an important one that we actually get it exactly how it is. Regular.ttf. There is another thing that we can do, we don't have to, but for performance reasons, one option that you can do is actually provide a second source where you say local and you write the name of the font here, so I could write, I just do it like this, Overlock.

[00:06:56]
And then I put a comma. The browser's going to use the first one that it comes across. So if you go, you go look on the system, look on that person's computer, if you find this font, use that one. If you don't find a font on their computer called Overlock, then you'll go and download the font file from here, so it can help with performance, especially if it's fonts that some people are going to have and some people aren't going to have.

[00:07:25]
So it's an option that you do have. Yeah, a nice simple way just to double check on the user's computer. So now we could actually use that font, so whoops. I'm just going to pull up this one. So now we can actually use that font over here. In this case, it's being used for our headings. So I have my H1, my H2. I could come and say the font-family is Overlock. And it has switched over and is now using that font.

[00:07:54]
Pretty simple, it worked. We're good. You'll notice here I put quotation marks here, I didn't. Again, it doesn't matter at that level. It matters only once the spaces come into it that you could run into that problem. You have to use quotations if it has a space in it. So if I did Overlock and I did Overlock like that, I hit save, oh, it actually worked. I didn't think this would work. Interesting.

[00:08:20]
Proved myself wrong on that one, maybe they updated things. I would still put it inside quotation marks. I don't know how the browser support is on that one. But I'm going to do it like that. Here we go. So yeah, that's how we can bring the font in. The problem is this is only getting one font. I'm only getting my regular, I'm not getting my bold. On my title here, if we look at the design. I have the top should be regular and the bottom part should be using the bold.

[00:08:56]
Over here we want to be using the bold. To do that, we need to point to the bold one. So we do the same thing at font-face. Font-family. What's the font-family? Anyone want to guess? Overlock still. Overlock still, yeah, the font-family hasn't changed. We're still Overlock. Nothing has changed with that. It's the same font. If you were in like a system with a dropdown, you'd have the font-family and then you'd have your dropdown where you can choose like bold, italic and everything else.

[00:09:25]
So here, the source, we can do the same way, we'll do a local as well. So the source, my local will be Overlock, probably Overlock bold, because the name of the font in the system would be something like Overlock bold. And then I would do a comma and say my URL, go back a step, go to the fonts folder, find Overlock bold.ttf. And there's one more thing I have to do. It doesn't know this is bold. So if I were to save this.

[00:09:58]
I probably have a conflict. I don't see an issue coming up, but it doesn't, oh, it's probably using the first declaration. I need to tell it that this is the bold one. So we do that by coming here and saying the font-weight here is bold. And now it knows this is the bold version, this is the regular version, or assumes this is the regular one cause I haven't said it. You could also put a font-weight normal here, and that would also work if you wanted to take the time to declare that.

[00:10:28]
So with those two set up, that's working, then I can say my H1 and my H2 should have a font-weight. I could say bold. I'm going to say 700 cause I prefer the numbers, as I said. And the span that's inside of there, we've already set this up as a span. I'm going to come on there, go and find it, and I can say this one has a font-weight of 400, which would be the same as saying it's normal. And we can see that that smaller font-weight has come in for those right there.

[00:10:53]
OK, so when we were talking about the units, I forgot, I said that I was going to talk about using M in the span, and then I never did it. So we never actually set the font-size up there. So I'm just going to go back over that quickly. So with all of these font sizes set up here, everything is starting to look a little bit better. We have the sizes we want, but I did mention we're going to talk a little bit about using M units.

[00:11:21]
And we have the span here. If we look at the design. In that design, the size here is smaller than the size here. And in the website, I mentioned that that span has a font-size, font-size, oops, of 2.25 rem. So if you just set that, that's fine. We're setting a specific value, it's going to work, there's no issues that are actually going to come up with that. So we could just go from there and you'd be happy.

[00:11:49]
For me, anytime I have a span inside of something where the font-size is different, that's one of those times where I go, hmm, maybe an M would work really well here. And so the reason I think that is because it's sort of this relationship, I always want this text to be smaller than this. Maybe I'm going to do something later on that changes the size of this text. So, if I can build a relationship between those two, that makes a lot of sense.

[00:12:23]
And it's one of those times where I do use the M unit. So, the font-size here is 3, 2.25 is 75% of it. So it's a 0.75 M, and it should look exactly the same. The advantage, as I said, is if the design updates, we do this as 4. Both of them change. This is getting bigger and this is keeping that same ratio between the font-size as what we had before, or if it gets smaller. That's probably too much to really tell, but we can see this is now bigger and this is always maintaining that relationship.

[00:12:52]
So I'm not changing both font sizes. I have sort of the master font-size in a sense, or the main font-size here, and because this is nested inside of it and because I'm using M, it creates that relationship. The compounding thing is a good thing in this case. I know I'm not going to have other things nested inside my span that are also using M's. The M here is always looking at this one, which is a consistent unit.

[00:13:09]
So even if I had something else weird on the outside, that's not going to spill in. It's always going to be the relationship between the H1 itself and the span that's in there. So those are those types of situations I look for where I can take advantage of how the M unit works when it comes to font-size.