Working with typography on a website

Welcome back buddies. In this one, we're going to look at fonts. Fonts are super important for us designers, and earlier on, we just used Arial, and some basic ones, so let's go and look at doing a proper font.

Now you got a couple of options to do it, and the big two are Adobe's Typekit, or Google Fonts, both are great. I'm going to use Google Fonts now. Why? Because they're quicker, and easier, and that's that.

So, I go to Google Fonts, so its fonts.google.com. Pick a font you like. In our case, we're going to use Open Sans. Why? It's a good font, it's the new Arial. You'll find, if you go to pretty much, if you open up a hundred websites, I bet that 90 of them are Open Sans. Why? Because it has some really good weights. There's lots of other ones. Roboto, I use lots, it's the YouTube font. There's lots in here. And the cool thing about them is that it's free.

So, have a look, and find one you like, and say you're in the design process, where you're in Photoshop. You can go into it inside, I like Open Sans, and there's a button option here that says, ‘Select this font’. And, if we go down the bottom. Click the font. Then you go-- You've added it down here to your collection. Then there's this option here that says, 'Download'. And that's not going to do anything for your website, but it will mean that you have them on your machine.  Download them to your PC, or Mac, and you can use them in your Photoshop mock-up, and Indesign, and Illustrator. There are these fonts that you can use. Lovely!

The one’s used on your website's slightly different. 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. Actually, before we do, I want to customize it. Because I want to use-- 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 for search rankings. You want your page to load really quickly. I'm going to do bold, I can't help myself though. Like, I want extra bold. I’m being moderate, and it's really common of me to get into it a bit slow. Why? Because I want all the weights, and when I tell it, I want this, and I want that.
So I'm going to use 300-light, 400-regular, and 800, for extra bold. 

Let's go back to embed. And what we're going to do, let's go and click on this, 'copy', and go into the Dreamweaver, and in our source code, put it inside the head. So, not our header, the language is quite important. Here's our head. So, our body I'm going to move down. Remember, body is everything on the page. Head is kind of the background stuff. That's all I want. Put it in right here. There you are, and you are in there. It just says, it's going to link to Google Fonts. And it's going to look for this font family called Open Sans, with these three weights. 

You don't have to go back. Say you do want to use 600 later on, you can just type--  Just type it in here, and you'll be able to have access to it. Remember, it's going to slow down your fonts though. So that's one half of it. So, it's looking for that font, you need to now actually use it in your css.

Let's jump back into Google Fonts. First you did this, then it said, use this. Font family, Open Sans,  sans-serif. Copy it. And what we're going to do is, we did this earlier, under styles.css. We said, in the body-- everything in the body be this font family of Gotham, and all these ones, we're going to do this. So just switch it out. And it just says, use Open Sans, Let's save it. Let's have a look. 

Look, it's my lucky font. You might be going, 'It doesn't look much different.'  Yes, it's not much different from here, but it is so much better. Yes, it's defaulting at the moment to 400. I could go in and change it. You can see it in here. Let's go down to-- where was that thing, controlling it. Here it is, there. So type in 'font-weight', and I can use, say, ‘800’. 'Save'. I've done some bad syntax in there. This looks good. Save it. Jump out. Things look broken. I have lost my fonts, lost everything. Let me go ‘File’, 'Save all'. There's a bit of syntax wrong.  I've broken it, I can't see it. No, it didn't. Just 'Save all'. Sometimes it happens in Dreamweaver. Just go 'File', 'Save all', and it kind of saves all in separate files you might be working with.

Hey, bright bold font. I'm going to switch that off. Go back to the default 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. You’d like to use it for body, or maybe, you want to use it just for this menu. So you can use lots of fonts, but remember, it starts getting a little slower.

Now why am I not using Typekit, only because it takes a little bit longer, and you need a paid subscription to do it. You have a paid subscription for Typekit, because you've got Creditpal, because you're using the new Dreamweaver. So, you can totally use that. And it just takes me a few extra steps to get set up. There are different fonts in them. Most of them are the same fonts. So go and have a look at Typekit, and Google Font, and find the font that's going to work for your design.