Welcome back buddies. Uh, this one we're gonna look at fonts. Okay? Fonts are super important for us designers. Um, and earlier on we just use like aerials and basic ones. So let's go and look at doing a proper font.

Now you've got a couple of options to do it,  and the big two are Adobe's, uh, type kit or Google fonts. Both are greats. I'm gonna use Google Fonts now. Why? Because they're quicker and easier and data that, okay? So go to Google Fonts.

So it's fonts.google.com. Pick a fonts you like, okay? Um, and now case we're gonna use open Sands. Why? It's a good font. It's the new aerial.

You'll find if you go to, pretty much,  if you open up a hundred websites, I bet 90  of them are open sands. Okay? Why? Because it has some really good weights  and there's lots of other ones. Robo, uh, robot, I use lots. It's the YouTube font.

There's lots on here, okay? And the cool thing  about them is that free. So have a look around, find ones you like  and say you're at the design pe where you're in Photoshop,  you can go into it and say, okay, I like open sand. And there's a button option here. It says click this font. Uh, and is there a download option?

Okay, so you click, click the font, then you go,  you've added it down here to your collection. Then there's this option here. It says Download. And that's not gonna do anything for your website,  but it'll mean that you'll have them on your machine. So you, you know, if you download them to your PC or Mac  and you can use them, um, like just in your Photoshop,  mockups and, and InDesign and Illustrator. They're just fonts that you can use.

Lovely. But to use 'em on your website, slightly different. Okay? They tell you what to do down here. You need to do two things. You need to put that into the head of your document.

It tells you what to do. Put that in your head. And this is the style that we use. So grab that. Well actually before we do, I wanna customize it  'cause I want to use, um, in my design I've used light,  regular and bold. And what you'll notice is the load time,  the more fonts you include, the slower the page loads  and that's really important, um, for search rankings, okay?

You want your page to load load lot really quickly. So I'm gonna do bold. I can't help myself though. Like I want extra bold, you know, I'm in moderate  and it's really common for me to get into the slow. Why? Because I want all the weights.

I want itx and I want this and I want that. So I'm gonna use 300 light, 400 regular,  and 800 for extra bolt. Okay? Um, and let's go back to embed. And what we're gonna do is gonna click on this copy, okay? And go into Drink Weaver and in our source code, okay?

It said put it inside the head. Uh, so not our header, okay? The language is quite important. There's our head, okay? So our body, I'm gonna move down Member body,  everything on the page head is the kind of background stuff. That's what what I want.

And  it says put it anywhere in here. So there you are anywhere in there  and it just says it's gonna link to Google Fonts  and it's gonna look for this font family called Open Sands  with these three weights, okay? You don't have to go back, say you do want  to use 600 later on, you can just type, oh, you have  to type it correctly, but just type it in there  and you'll be able to have access to it. Remember, it's gonna slow down your fonts though. So that's one half of it. So it's looking for that font.

You need to now like, um, actually use it in your CSS. So let's jump back into Google fonts. So it said do this, then it said use this font family  of open Sand, sand, copy it. And what we are gonna do is we did it earlier under  Styles css. And we said, remember instead  of just we, we said in the body. So everything in the body be this font family  of Gotham, okay?

And all of these ones, we are gonna do this, okay? So just switch it out  and it just says use open sands instead. Let's save it. Let's have a look. Look, it's my lovely font, okay? You might be going, it doesn't look much different.

Yeah, it's not much different from Ariel,  but it is so much better. Okay? So yeah, it's defaulting at the moment to 400. I could go in and change it. Okay? You can see in here.

Let's go down to, um, where was that thing controlling it? Um, there it is there. Let's type in font wait. Font wait, okay. And I get to use say 800. Oh yep.

Save,  I've done some bad syntax in there. Nope, this looks good. Save it. Jump out. Things look broken. They have  lost my fonts, lost everything.

Okay? And I'm gonna go to File Save all. There's a bit of syntax wrong. I've broken it and I can't see,  oh no, I didn't just save all. Sometimes it happens in Dreamweaver. Just go file save all  and it kind of saves all these separate  files you might be working with.

Um, and hey, giant bold font. Okay? Uh, so, um, I'm gonna switch that off. Go back to the default at 400. Save Nice work. We have got a font.

Can you have more than one font? Of course you can, but load times get compounded. So you'll go into Google Fonts and you'll find another one. You'll have to put it up again in the head  and put it again somewhere. Okay? You'll have to use it for body  or maybe you want to use it just for this menu.

Okay? So you can use lots of fonts,  but remember it starts getting a little slow. Now why aren't we using Type Kit? Only because it takes a little bit longer  and you need a paid subscription to do it. You have a paid subscription for type kit  'cause you've got Creative Cloud 'cause you're  using the new Dreamweaver. So you can totally use that.

Um, it just takes me a few extra steps to get set up. There are different fonts on them. There's lots of the same fonts. Um, so go and have a look at type Kit versus Google Fonts  and find the font that's gonna work for your design.