How to add different fonts to a website in Dreamweaver.

Hi there, in this video we're going to change this ugly Times New Roman font to this lovely Open Sans Condensed font. And we're also going to have to change the spelling of this. I've just noticed that. You've probably been in this whole course, going, "Wow, change it." I'll change it before the end of this course, I promise. So let's go and add fonts using Dreamweaver.

So what I want to do now is change the font that's in here. Now I could find, say, my Desktop view, and you can see, ul, li, and the a tag. So that's the thing I want to change. How do I know it's that one I want to change? I go to 'Type' here, and I say 'Font Family', and I just pick another one. So I know, it does change. I don't want any of these fonts that are in the defaults, so I'm going to delete them, but that's how I figured out which one needs to be changed. But I could change this one, and it would work, I get to install my new font which is going to be Open Sans Condensed. But the problem with doing that is that I have to do it for this, and every bit of text in my whole document is going to have to go through, and then I have to find the Font Family for them.

So what designers do, especially at the beginning, is they'll define the font Globally. So they'll say, everything in this document, everything be Open Sans Condensed. So you pick whatever your Body Copy font is. So I'm going to look at my Illustrator file. That is a special use case, it's for the top, what I use the Condensed font here, for the Type, and down the bottom here, and I use it on preceding pages here. That's the Open Sans Condensed. I've decided that that's my main font. So, I'm now going to go through and set that as my default. You do it in Dreamweaver.

So in Dreamweaver, what we need to do is, we need to start the Body Tag. The Body Tag is, remember, if I click inside, anywhere here, the Nav, I'm inside the Header, which is inside the Container, which is all inside the Body, the Body is everything I see on my page. Remember, the Head is everything that the computer sees, and the Body is everything that the user sees. So if I Style this, everything in here may be Open Sans. So to do it, I'm going to be in-- no I'm not going to be in 'All Sources'. I'm going to be in 'styles.css', I'm going to go 'Globally'. And I'm going to click—

We don't have a Body Tag yet. We go to Selectors, and we pick Body. Now Body is one of those tags that already exist and doesn't need a full stop in front of it. Just the ones we create. The Classes that need it. So 'Body', I'm going to go to 'Type', or 'Text'. And we're going to go 'Font Family', and we could pick one of these. The only trouble with using-- say you do like Gill Sans, and you're like "Yes, Gill Sans is good." You can see, he comes on for the ride because everything's been changed to Gill Sans. But what's actually happening is, it's saying "Hey, person that's visiting my website, do you have Gill Sans on your machine?" "No? Well, do you have Gill Sans MT?" "No? Well then, do you have Myriad Pro?" And it kind of works its way down unless it finds one. It generally ends up at Arial. So you don't want that. You want more control, you want to actually say "Use the font I mean, not just a few of these." It's very uncommon to use these now.

So what we're going to do is we're going to go, we're going to bin Gill Sans, goodbye. And we're going to put in a new font. So let's go up to 'Font Family' and we're going to go to this one called 'Manage Fonts'. Now, this loads something called Adobe Edge Web Fonts. All these are, is that, are fonts from Adobe that they've given away for us to use commercially for free. It's got some helpful search options at the top there. We're going to use stuff that we've designed out of Illustrator. You can see in here, in Illustrator I've mainly tried to pick Web Fonts when I'm in designing. So if you're in Illustrator don't go off and pick random font from your machine. Make sure you're using Web Fonts. So I've done it, so both of these fonts are available as Web Fonts. But if I haven't, I can go through here and say, I want to look at some Heading Fonts. It gives me more Heading Fonts.

Say you want some Body Copy fonts, that's this one here, it's more kind of standardized fonts. I'm going to turn them both off, you can pick Script fonts, you can pick Sans Serifs. So you can decide, just to help you pick a Style. I'm going to turn these all off, and I'm going to search for a font. We're using Open Sans, and we're using the Condensed version. Why? Just because it's really good for headings especially, because it's a Body Copy font, because it's kind of skinny, you can fit a lot of characters on. So really long headings are more likely to finish on one line rather than breaking into two. But that's totally a Style, design choice as well.

So what I'm going to do is, I've picked this hit, that little tick in the corner, and you click 'Done', nothing happens. So you kind of activate it, then go to 'Font Family'. And it will appear down here. Now click it on, and then it will appear. A little warning will appear, probably. Mine's been disactivated; disactivated is not a word, deactivated. And it just says we've added a couple of things as well, as a warning. It just says we've had to activate the 'Normal', and the font-weight is '300'. Normally those wouldn't come on by default, but it's just done it for you to make this font work.

The other thing that's happened is-- that's it, we've got a font going, we don't have to worry about any more, but just to let you know, you've got this thing that appeared. So, in my 'Index', 'Source Code', at the top here, remember, we put in the link to JavaScript, and the link to SVN, and then our Style Sheet. This thing here is just being injected by Dreamweaver for us, to make it work. And basically what it's doing is, it's going off to download the font. You can see, edgefonts, Open Sans Condensed is being loaded for us. So, we don't need to do anything with it, we just have to leave it there. Let's do a 'Save All', let's just check if it works in a browser.

Awesome! Here he is. Go down the bottom here. The Layer's not quite right, well it's totally not right. But don't worry if yours is still working like this. We've got to fix that in the next video as well. There's a few other things we need to do to make it work. All right, let's get on to the next video.