Fonts

[00:00:00]
>> Fantastic, okay, we're on to part two. We need to set up our fonts. So if you go back to your web page here for the course, you'll see that we have fonts. And once again, your designer is going to tell you what exactly you need in terms of fonts for the particular design that you're working on or you can pick these out using font pairs.

[00:00:22]
So if you find one font that you like, if you put it into Google and you say whatever your font name is, font pair as part of your search terms, you'll find something that some designer somewhere thinks they go together and it will really help your design to have professional help you pick those out.

[00:00:39]
So If we go to Google Fonts, you can click the link right here. This will put us into Google Fonts, which is a really easy place to go and get our fonts. Then we are going to look for specifically Lato, Josefin Sans, and Fira Mono. So we can just do a search for those.

[00:01:00]
So, Lato, and that will pull up Lato here. If we click on that, this interface to me changed kind of recently, so it may work a little bit differently than what you've seen before. What you're going to do is, as it says right here, hopefully, click here to download the font, get its embed code and find out how to use it.

[00:01:24]
So we're gonna say get font and it's gonna add it to a shopping cart here. That's good enough for the moment, just leave that. Then if we click on the logo to go back again, we get our search box back and we can look for Josefin Sans, J-O-S-E,okay?

[00:01:50]
Same thing once again, click on that, click on Get font, and it will show you you have two fonts selected. And then we're gonna go back and we will search for Fira Mono. There it is, click on that > Get font. And now we have three fonts here in our so-called shopping cart.

[00:02:17]
So at this point in time, you can either download these and then you'd have to upload them to your website and there's a bunch of code. If you wanna learn how to do that, you can probably just sort of Google for download font, install in my website. To keep things simpler, we're just gonna use the embedded forms of these, so the fonts will live on at Google and we'll just incorporate them in our document.

[00:02:40]
So when we click on Get the embed code here, this is where we actually have the choices in terms of what kinds of weights and styles of these fonts that we wanna have. So by default, pretty much all of the weights and styles are included. We don't need to include include all of those variations, and we don't want to include all those variations because that is going to slow down our website.

[00:03:08]
The more variations we include, the larger these files become, the more time they take to download. So we wanna try to streamline this as much as possible and just pick what we need. So here for Fira Mono, I am going to click Change styles down here and it'll show me all of the options that are available.

[00:03:26]
The only one that I want is Regular 400, so I'm gonna click this first check box slider to turn everything off. And for whatever reason, it just gives me the Regular 400 by default. That is all that I want here. When I go down to Josefin Sans, it's gonna give me the option of the full access versus one value.

[00:03:47]
This is a different kind of font, this is called a variable font. I'm not gonna go into a whole lot of detail on it, but let's just say it's all baked into the one font. There's not different files that have different file sizes to download. So this one we can just leave alone the way it is.

[00:04:03]
And then when we go to Lato down here, once again, we're gonna click on Change styles. I'm gonna turn off all of them. And the ones that we want are the Regular 400 and the Bold 700. This is then gonna give us some embed code over here. We will need this embed code later in Chapter 6, well, we don't need it right now to work in CodePen.

[00:04:24]
What we do need to work in CodePen is in this third line of HTML here. So this third line of code right here, where it says link href, and we have this long thing in between quotes. I've just highlighted it here on the screen for you, that is what I need you to copy.

[00:04:42]
Just copy that HTTPS, it's a link, and that includes links to all of those particular fonts. If you just copy that, Then we're gonna go into our CodePen and we're gonna go to Settings, and we're gonna go to CSS. And then down here at the bottom it says, Add External Stylesheets/Pens.

[00:05:10]
Down here where it says your website.com/style.css, just paste in that URL that you got from Google, and then click Save and Close. And if you did it right, absolutely nothing will happen. Everybody good so far? Okay, if nothing happened, you are in great shape. Why is nothing happening so far?

[00:05:38]
Anybody?
>> You haven't applied the font to anything yet.
>> Correct, we've linked to the font but we haven't shown told the font where to display. So we need to make sure that we do that. And here inside of the Google Font, it will actually tell you exactly how to include these.

[00:05:55]
It gives you class names for these. It will give you some of the various properties that you might wanna have include for these particular items. And this is if you were setting these up as CSS classes. We're gonna set hours up as variables. And so I am gonna go back to my CSS here.

[00:06:18]
And I'm gonna scroll back up to root up here at the very top. And I'm going to put in the font families cuz all the information that we need is the font-family. So, the first one, I'm gonna have my main font, M-A-I-N, my main font, and this is going to be Lato.

[00:06:41]
And right here inside of Google, it will tell you for lato-regular it'll tell you you just use font-family: "Lato", sans-serif. So what is the Sans Serif here mean at the end? Does anybody know?
>> It's a backup.
>> It is a backup, right? So Lato is the priority, Sans Serif would be whatever the computer that's in front of you, whatever its default Sans Serif font is, use that instead.

[00:07:13]
When would we ever see that Sans-Serif font?
>> If the Lato doesn't load properly.
>> If the Lato doesn't load properly? If Google Fonts is down, right, it's been known to happen. What else? I'm on the airplane flying here from Boston and I don't have any WiFi. [LAUGH] So it doesn't load, right?

[00:07:38]
So then I'll just see it in Arial. Okay, usually it's Arial, Aerial is your default. All right, great, so we're gonna copy that. And here inside of our CodePen, we can then just put in not the whole thing, we want just the values, Lato, sans-serif, okay? We're gonna do the same thing here.

[00:08:02]
For our other font families, we're gonna have our heading font, and this is "Josefin Sans", sans-serif. Right, so tends to be that we're gonna be using this with headings mostly. I've just called my heading font because I have two sans-serif fonts. Often I call them serif and sans-serif for my variable names, but here I had to use something else.

[00:08:33]
Then finally, our Mono font, you can just call it Mono, as in mono space, it's like a typewriter font and. And that would be "Fira Mono", monospace. Awesome, so now we've connected our font to our CodePen, awesome. We have managed to set up our variables, calling for the font, awesome, and we still, Still have ugly Times Roman.

[00:09:02]
What is our problem now?
>> We need to apply the variable to the text.
>> We need to make that connection, right, and indicate where we want these font families to display. So the best way to do this, and the way that I prefer to do it, is to start with our body declaration.

[00:09:24]
And I guess, I don't have one here, so we'll make one. Right here after my root, I'm gonna have a body style. So this is the whole body of the document. We're talking about the HTML body element. Remember, we don't see it here in CodePen. It's there, the CodePen just trims it out for you.

[00:09:43]
And I can say my font-family will be what?
>> A variable?
>> Yeah, var what?
>> Main.
>> Main, exactly, var(--main). Look at that, it looks million percent better, boom. Now, what if I want to override this for my headings? How could I set that up? Remember we have this HTML here.

[00:10:14]
How could I set up some styles there for my headings? Do I need classes.
>> No.
>> No? What could I do?
>> You could do each take separated by a comma.
>> Exactly, I could do h1, h2, h3, h4, h5, h6, all of those guys. When you separate your individual CSS selectors like this with commas, you're saying for the h1s, and h2s, and h3s.

[00:10:51]
And each one of those is evaluated separately. So we have six selectors here in a row. And now we're going to say what? So what do I type now?
>> Font-family
>> Font-family. And then what?
>> [CROSSTALK]
>> Heading
>> Heading? See, it's very very predictable, right? And look at that, there's all of our headings.

[00:11:23]
As it turns out, I wanna also have those all be uppercase. We can do that with CSS too, just by doing text-transform, uppercase. Hey, look at that, it worked. The last one we'll set up just, I don't actually have an instance of this right now, but let's set up the style just so that we can use it later.

[00:11:48]
I'm going to set up a class called mono. And what am I gonna put in here for my class of mono?
>> I assume it's gonna follow the same pattern.
>> Exactly, font-family: var(--mono).