Changing the Font with CSS

[00:00:00]
>> Jen Kramer: Well, there's one thing that I think everybody should do as the very first thing that they should do in their document. And that is change the font. There is nothing worse than looking at a whole page of Times New Roman font on a webpage. Do you agree?

[00:00:12]
It's just awful to read and it looks horrible. So we're gonna go ahead and start writing our CSS by changing the font on our entire document from Times New Roman, which is the default that set up by the browser, we're gonna change it all to Arial. So how do we go about doing that?

[00:00:31]
Well, CSS is based on our HTML, we have to take a look at our HTML and how it's set up. And that's gonna sort of dictate what we're going to create in our CSS. And the first part of our declaration, these are called declarations in CSS. The very first part of that is a thing called the selector.

[00:00:52]
In this case, we're gonna work with the body tag. So this is a selector called body. And it's gonna apply to everything on the body tag. And so, you just need to type that word body. So any HTML tag you can just type on in there, nothing special you need to do just body like that.

[00:01:10]
And then we're gonna go and put in a pair of curly brackets just like that. And it tends to be the habit of people working in the industry to separate your brackets on to two lines like this. So you put your brackets on two lines just like that and everything is you type all of your various style declarations in between those curly brackets.

[00:01:33]
So every style declaration is made up of two parts. It's made of a property and a value, property, value. You'll hear a lot about property, value pairs and programming, okay? When you get to JavaScript, you hear a lot about properties and values. Same kind of thing here inside of body.

[00:01:49]
So we're gonna go ahead and start with font, hyphen family. That's our property. And as you saw as you started typing here, there were several of these. That VS code will go ahead and suggest for you. So there's a whole bunch of things that you can adjust. Be aware that just because it's in this list doesn't mean that you should be using it, right?

[00:02:15]
Just because you can doesn't mean you should. Some of these have better browser support than others. Everything I'm gonna be telling you about today has great browser support, you're not gonna have to worry about it working in one browser or another. So we're looking at font family. And then if you happen to continue on here with VS code, it's gonna give you a long list of a pile of fonts, okay?

[00:02:39]
Fonts happen to be something that come from the computer that's right there in front of you. And we can make the assumption that everyone in the world is gonna have Arial on their computer, but not everybody does. And so, what we need to do is we need to have choices of fonts.

[00:02:54]
They'll try to go the browser will try to load the very first font on your list. It can't load that font, it goes to the second font on the list. And if it can't load that one then it will go to the next one on the list. And it will just continue on that way until it finds a font that is installed in your computer to display.

[00:03:11]
So the one I'm going to choose here is Arial, Helvetica, Sans-Serif. And we end that line with a semicolon. So this is gonna try to load Arial first, Helvetica second, and then just a generic font for the third spot. And so these generics are called sans-serif, serif, monospace is another one, cursive.

[00:03:38]
There's a couple of these, fantasy I think is another one. Usually you Serif or San-Serif. Those are pretty much the ones. And what do we mean by the way by serif or san-serif?
>> Speaker 2: A little curly Q on the end of the letter.
>> Jen Kramer: It's the little lines on the ends of the letter.

[00:03:53]
So if you think of a capital T, for example, we think of a capital T. This one here, this T, this is serif or san-serif?
>> Audience: San-serif.
>> Jen Kramer: San-serif, it's very, very simple T. Sometimes if you take a look at T, maybe on your webpage? In fact, we can just go ahead and do that.

[00:04:17]
Let me make a great big huge T. You don't have to do this.
>> Jen Kramer: Let me just, this is just for demonstration. So you see the big T up there at the top of my webpage? See how it's got the little thingies hanging off the edges? Those little thingies are called serifs.

[00:04:40]
And for all you French speakers out there you know that if there's no serifs, it san-serif, right? So that's where it comes from. Okay, I'll go ahead and get rid of that and we'll get rid of that. All right, so if we're going ahead and now save your style sheet,

[00:05:01]
>> Jen Kramer: Let's go ahead and take a look at that webpage in your web browser. Remember how we do that, you can just right-click somewhere where there's no text in your HTML, right-click or command click and just say open and default browser. And that will go ahead and open up your webpage for you, and hopefully it worked.

[00:05:20]
It looks like mine didn't. Did yours work?
>> Speaker 4: Yeah.
>> Jen Kramer: Yours work? Cool, anyone see the problem was to why mine didn't work?
>> Speaker 5: You didn't save it.
>> Jen Kramer: I didn't save that. Okay, so this happens to everybody. That's the first thing you should check when something quote doesn't work.

[00:05:39]
Make sure that you saved it. All right, so now when I refresh the page, now what we work, okay? Doesn't it look better already? It's amazing how one little change can change everything. Shall we continue on trying to petrify this thing?
>> Speaker 6: I have a question.
>> Jen Kramer: Yeah.

[00:06:00]
>> Speaker 7: So you said that you could list different fonts and so it will choose the first one and then like if it doesn't find it, it will choose the second one.
>> Jen Kramer: Correct.
>> Speaker 7: So you could have, like if you have downloaded others fonts onto your computer, you can use fonts there and then hope that somebody else has it but then also have the contingency of you can put it in Arial or Helvetica.

[00:06:18]
>> Jen Kramer: That is completely legitimate. So when I was teaching very earlier on I had a student who was very fond of the Wonton font. And he did everything on his websites in this Wonton font, but I didn't have it so I never saw the wonderful world of Wonton.

[00:06:32]
So it probably hardly anyone had Wonton on their computer. So in the old days, that is in fact what we did. We could list all the fonts that were on our computer, hope that somebody else had them. There were whole websites that would tell you what percentage of the world had that font installed.

[00:06:47]
These days, there's actually some fonts online that we can access. We're gonna talk about those later on in the course. But for right now there's like seven choices, okay? Where we are at the moment, Arial, Helvetica, Times, Georgia, Courier, Trebuchet, Comic Sans, [SOUND] go Comic Sans.