Adding typography with Google Fonts

- [Instructor] If we remember from lesson two, we used Google Fonts to actually pick the things we wanted. We looked through all of this, and we picked the kind of typography that we needed, but what we wanna do next, is use this typography on our website. How do we do this? So what were the two typefaces that we used? So again, I can go back to my Local Styles and just see what we're using, Josefin Sans was the heading 1, Josefin Sans was heading 2, this was in a different weight though, so something to kinda be aware of, and this was Nunito Sans, so we actually need two typefaces, one with two weights in here.

So again, back on Google Fonts, the first thing we're gonna do is search for Josefin Sans, if I spell it correctly, there it is. Okay, so we're gonna pick this one and we wanna add it to our site. This is exactly what we'd need, how do we select this style? Well, you might guess over here, it says "Select this style". What style do we want to pick? Well if we again look back, we can see in this one we wanna pick the semi-bold weight and in heading 2 we wanna pick the regular weight.

So I wanna pick the semi-bold one, Select, there it is. And here, we want the regular weight, Select, there we go, we've got two ready to go. Well, we also wanna use Nunito Sans as well, so again, I'm just gonna go back and find this. So this is, Nunito and Nunito Sans there it is and we wanna use the Regular for this one. So we've got this ready to go. Here what we could do is even download the families, or we can embed these fonts into a web page which is what we want to do.

So I'm gonna click Embed and let's see what it gives us. So there's a few ways to do this, we can actually do it as in HTML or we can use this @import way. Now, there's two ways to kinda think about this, I actually prefer the @import way and the reason for this is that it kinda ties up with the CSS, it's how it looks. Again, this is personal preference. So what I'm gonna do is inside this, I'm not gonna take all of this, I'm just gonna take this one line inside these style tags.

Gonna copy this and I'm gonna go into my CSS code and right at the top of this, I'm gonna paste that. So this is pasting this in. Now what I can do, is use these font families and it says in here, I can use it as Josefin Sans and Nunito Sans in my CSS. So what I can do now, is if I look at the page, nothing changes, the reason nothing changes is because I'm not actually changing this from Arial. The body family, which one do I want to use? Well, if we look at the default style of the page, the body style of the page is this one over here and this one is our body style.

And what is our body style? Again, if I just quickly go and edit this, it is Nunito Sans. So the default I prefer to be the basic one, Nunito Sans. So hopefully what we'll see now, is on our site, everything has switched into this Nunito Sans style. We wanna change different things though, we wanna change this navigation to look a little bit different too.

So where do we wanna change this? Well we wanna change this in a particular style, we want to change this font size, 40, to also be a different font family. So with this, we're also gonna do h1 dash nav, we're also gonna add in, font-family for Josefin, if I spell it correctly again, Josefin Sans. And the font weight isn't 700, we actually picked 600. 600 is the semi-bold version of this, so we're gonna pick 600 there as well.

So what we'll see now, is if we look at the site, we'll have this in the correct typography. This one down here, isn't a p tag, and because we're not overwriting it in our CSS, this will be Nunito Sans, but because this is in the nav tag up here, this is now font family Josefin Sans. So this is kind of how CSS works, we overwrite the things we want to overwrite, the default is gonna be the body copy and then we pick and choose what we want to change.