0:00
Yo guys, what the hell's going on? This is CSS for beginners lesson 28, and today we're
0:13
going to take a look at the font family. That's coming up. Alright ninjas, so I'm back in
0:18
the HTML file, this article HTML file on the left, and a blank CSS file on the right. And
0:23
we're going to take a look at this font family property. So to do that, I'm going to target
0:28
these H2's and P's within the article. And we're going to do it all within one rule
0:32
So we'll say, article H2 and article P. And we're going to style these. So, the font family
0:40
First of all, what is a font family? Well, that's the font style that you give to certain elements. And that could be Arial, it could be Helvetica, Comic Sans, Impact, whatever
0:48
font you want to give to it. Now, how do we do this? Well, the property name is simply
0:53
font-family. So we just write that first. And then we can specify our font name. And
1:00
I'm going to give this a font of Arial. I want all the P's and all the H2's within the
1:04
article tag to be Arial. So I'll save this and then view it in a browser just to make
1:09
sure it's worked. Get this in Chrome. And cool, there we go guys, they are all Arial
1:17
So what's going on here? Well, I'm not embedding the font file into the browser. What I'm doing
1:22
is I'm saying to the CSS file, look, I want these to be Arial, these tags that are specified
1:28
So when the user loads this on their computer, I want you to search their computer for Arial
1:34
If they have Arial installed, then great, we can display this text as Arial on the web
1:38
page. If they don't have Arial installed, then what's going to happen is it's going
1:42
to fall back to the user's default browser font. And this could be Times New Roman or
1:47
something else. Okay? So we don't always want that. We don't want them to fall back onto
1:52
some generic font style that we don't think will go with the design of our web page. Okay
1:58
So how can we overcome this? Well, one such way is by creating what's called a font family
2:04
stack. And this is where we specify a multitude of font families so that if one font is not
2:10
installed then it can fall back on another that we specify and another that we specify
2:15
And you can have as many font families within this stack as you like. So the way we do this
2:21
is by putting our font, the first font that we want first. So we'd say we want this to
2:26
be Arial. Okay? And then we put a comma and we say if Arial is not installed, then we
2:31
want these tags to be Helvetica. And if Helvetica is not installed, then we want these tags
2:38
to be just a standard sans serif font. Whichever sans serif font you have on your computer
2:44
just give me that because that's going to look fairly similar. Okay? So that there is
2:49
a font stack. And you can see it's comma delimited. So we're saying the most important
2:54
one is Arial. If they don't have that, try Helvetica. If they don't have that, give me
2:58
any sans serif that they've got installed on their computer. Okay? So if I view this
3:02
again, then nothing really should happen because I do have Arial installed on my computer
3:10
And yeah, nothing happens. But if I didn't have Arial installed, let's just create a
3:14
font up here. Let's call this Totally Awesome Font. Believe me, guys, that's not a real
3:21
font. You might think it is, but it's not. All right? And we'll view this in a browser
3:26
again. And hopefully this should fall back on Helvetica, which it does. And they look
3:30
very similar. But trust me, that, guys, is Helvetica. And if I don't have Helvetica installed
3:38
then we'll just put Ham Font. Then it's going to fall back on any old sans serif, which
3:44
to be honest, I think may be Helvetica anyway. So this may not change. Yeah, that was very
3:51
similar. So it's falling back on my standard sans serif font, which may be Helvetica. It looks very similar either way. So what if we wanted it to be serif? We can just take
4:02
off this. Let's just make sure this is working. So we don't have these two fonts here. And
4:07
we'll open this in a browser, Google Chrome, just to make sure this has worked. And yeah
4:14
now it's sans serif, which is, by the look of it, Times New Roman. OK? So that is the
4:20
font stack in action. And this is what we'd use probably 90% of the time to kind of combat
4:26
those cases where a user doesn't have a font installed. Now, there are other ways we can
4:33
combat it. We can use what's called the at font face declaration. That's a little bit
4:37
more advanced. So I'm not going to cover that until maybe towards the end of this course
4:41
And we can also use base 64 encoding. And I'm not going to cover that until the end
4:45
of the course as well. But we generally use those when we have more specific fonts that
4:48
we'd want to use that we know that a user won't have installed on their computer. So
4:54
I'll get to that later in the course. But for now, if you have any questions about this
4:59
method whatsoever, feel free to drop a few comments below. I'll answer all of those questions
5:04
as soon as I can. Otherwise, if you enjoy these videos, please like, subscribe, and
5:08
share. And I'll see you guys in the next one
