Hi, my name's Dan and in this video we're gonna look at  adding fonts to your website. Now there are two kinda main ways you can add fonts. One is your boring old system fonts,  things like aerial times zero Roman. And the other way is to use hosted fonts. And that would be a surface like Adobe's uh, web edge fonts  or you could use Google fonts. So we'll look at both of those.

So let's first look  at system fonts. Um, so let's look at uh, adjusting this H one. Now I wanna change the font of this. I can go to my all. I'm gonna go to my main CSS, find my H one find text  and font family here. These are my system fonts boring  and there's not much of a selection there.

So what we wanna do is look at hosted fonts. So hosted fonts are the easy way to get  to the Adobe hosted fonts, which are called edge web fonts. And let's go to manage fonts. And this pops up. Now these are fonts that Adobe allow you to use  for free on your website  and to use one, um, I can go through this big long list  and all I need to do is tick one on. So I can click on this one here, say I decide to use uh,  alpha slab and I can click done.

Now nothing really happens. What I need  to do now is click on H one  and in font family you'll see this one called Alpha slab. Click it, give it a second and it should update. Now if it doesn't update  and it still stays the same font, it means  that you're probably not connected to the internet. If you do connect to the internet, it will update. Um, so don't worry too much about it.

If it's not updating locally,  it will work when you put it on a website. So that's Edge Fonts. You can go through pick different fonts for different parts. Now my advice is to make sure you keep the fonts down  to a bare minimum. So maybe two fonts for your website. Three if you have to.

'cause what needs to happen is,  I'll show you in the background here in Code View,  what's happening is I'm gonna be a source code. So I'm an H TM L source code and I'm looking at code view. So I'm now looking at the HTML of the page. What you can see here in the head is Adobe's added this  bit of script and it just says  that the following script  downloads the fonts, blah blah blah. And you can see here there is the name  of our alpha slab one. So Adobe are hold hosting it  for us on something called Edge Fonts.

And it just means when our website's loaded it goes  and gets that font and loads it on our page. Now if we keep adding fonts,  it's gonna keep increasing the load time. Now fonts are reasonably big in terms of file sizes,  so we don't want to have loads of fonts  'cause our page will take a long time to load  and Google doesn't like that  and we don't do anything Google doesn't like. Great. So in terms of edge web  fonts, that's all you need to do. Um, you don't even need to worry about this bit of code,  just don't delete it and you  can start working through the fonts.

Now, uh, edge fonts are great, um, perfect built in. There's no right reason you can't use them. Um, but I'm gonna cover Google Fonts now why? Because Google Fonts is probably the industry standard. As a web designer you should know all about Google  fonts and it's gonna  Help us learn a little bit more  about code and how that works. Okay?

So I'm gonna undo this  and it's not just a matter of going  to edit undo kind of works. So if I've gotta undo, it's going to remove that font  and what it's done is it remove it from the H TM L code,  but it's still here being called  as alpha one and I don't want it there anymore. So I'm gonna bin it and it should go back  to its lovely old aerial self. So to work with a Google font, you need to go  to its website, right? So Google's got our website, google.com/fonts. Um, and there is a huge amount of fonts here.

We love them, we love Google  because they're given it to us for free. You're allowed to use them commercially for websites  and there is a huge selection  to use them is quite simple as well. What we're gonna do is you can see the preview text here. I'm gonna type in, let's make this awesome just  to give it an idea of  what it's gonna look like and all the different fonts. Okay? And you can scroll through until there's,  there's hundreds of them.

Okay? What I've selected in my Photoshop um,  mockup is I've used two fonts. I've used this one here called Roberto Slab  and this one down here just called Roberto. So they're two separate fonts. They're in the same family, they look a little different  but they relate to each other nicely. So I've got Roberto  and Roberto Slab, I'm gonna use those two on my website.

I can find them over here so I can type ino  and you can see there the name is down here. Roberto, there's robotic condense. I don't want mono, I want this one here, Roberto Slab Ando. So what I'm gonna do is I'm gonna add to it collection. Great. It's added to this little bottom piece here.

I'm gonna scroll down, find Roboto slab  and click add to collection. Right? And now I'm gonna go to the one that says use. Now in terms of roboto, I've got lots of different weights  and we call them normal,  but in code we're gonna call them this number here, 400. So that's the regular size. I'd like to have 300, 500 and 700.

Why? Because in my design I've used those different sizes  around the website and I'm a bit  of a nerdy graphic designer as well. So I love fonts and I love messing around with 'em. So the only trouble is you've gotta  make sure can you see over here? It's in the green. It means that,  remember we talked about earlier about if you have too many  fonts, it takes ages for the page to load.

There's a little helpful little guide here to say um,  that you're still in the green fine. And down here I've got normal but I'm gonna pick this one. Oh, nearly off the green and bold. Ah, okay, I always end up about here. If you are going for super fast, you want to keep it as low  as you can, I'm pushing into the yellow  because I love fonts and I love loads of them. Great.

Next thing to do is I'm gonna scroll down the bottom  here and there's two parts we need to do. Um, this part here goes into the head we saw a little  earlier there where Adobe puts uh,  web edge fonts into the head for us. Okay, we have to manually put this in to use the Google one. So I'm gonna copy this, click it all  and go copy edit copy jump back into Dream Louver. So to use this font, I'm gonna go to my code view,  make sure I'm in source code. And I wanna find the head tag  because back in here it says the instructions  to embed your collection, it needs to go uh, it needs  to be the first element in your head tag.

So you just need to look for that tag here. There he is there. Okay, there it is my html. So I'm gonna put it just  after the head and I'm gonna paste it. Okay? And this is my link to my Google font.

So very similar to the Adobe Edge fonts. You can see here it's got the family of Roboto  and it's got my 400, 300, 500,  all the different sizes plus the robot slabs. So now it's available to be used on my website. So the next thing I need to do is jump back into the Google  site and you can see here this is how  to use these fonts, font, family, iso san. So I'm gonna start with the roboto slab  'cause we're styling my H one. So I'm gonna copy this and you can see it over here.

This is how it should look like in your CSS. So let's go and do that. So jump back into Dreamweaver. Gonna go to my main CSS, I'm gonna find my H one. There he is there and I'm going to put a return in  and hit paste and font, family colon, roboto, slab. And this thing here, this backup is in case Roboto slab  doesn't load, um, the browser nose to go  and load just the basic serif font.

Great. Let's jump back to live view. You'll see here it's now changed to Otto Slab. Now it's a little bit more manual using Google fonts. I gotta go through and find all my classes  and add either Roberto or Roberto Slab. It's not a big deal and it allows me access to a big volume  of fonts that I can use from Google.

One other thing, um, to note  for Google fonts is Google lets you actually download the  fonts to use on your machine. At the moment we're just kind of hinting at them in our code  to go off and pull them from a website. Now what if we want to use them,  say like in my Photoshop tutorials,  what you can do is you can go download the fonts  and use them on your system. And that means you can use them in your print stuff  and in your concepts like we have here to do  that on the Google Fonts website. And we're gonna scroll to the top here  and can you see this button here? It's a little insignificant little download arrow.

If I click this, it says, don't worry, you don't need  to download them for your work on your website. That's totally true. But if you do wanna work, um, locally  or use them in say Microsoft Word  or Adobe Photoshop like I have,  you can download the zip file, okay? You click it, it'll download, you open it up  and you'll end up with the fonts. Now I've got the fonts already downloaded  for you if you want them, they're in the class files. So I'm gonna jump to my desktop.

So check them out in the uh,  dream move exercise files that you've downloaded. Uh, go to fonts and you can see here's uh, roboto  and here's all the fonts and there's roboto slab as well  to install them both on a Mac  and a pc, just double click them. If you double click them dull  and click install on a Mac, a pc. It's slightly different but just as easy. And they will be installed for you to use locally. Now remember, you don't need to download them  to use them on your website.

It's just handy to have them downloaded for you  to use in other things. Now the last thing to know about fonts is a nice little way  of changing the default font of the whole site  because at the moment I'm gonna change my H one to the slab. I'm gonna go and change my p tag here, this first paragraph  to using just Otto. And I'm gonna have to go through  and do it for every instance. Okay? So the P tags, the A tags, any classes,  anything I've used, I can have  to go and change the font for.

What we can do, just to make it a little simpler for us, is  that we can go and change the what's called the body tag. And the body tag is everything that appears on the page. So I'll show you in source code, I'll go to code view. We talked a second ago about the head there he is  there, everything. Everything that's in the head is everything  that the browser sees. So the browser needs to know what font to use, uh,  what the page title is, um, what the description is.

The body is everything you see on your webpage. It starts here and it goes all the way  to the bottom down here. And everything inside of this is stuff  that appears on your page. So what we can do is a nice little trick  for web design is we can style the body tag  and say everything that is inside the body tag become,  in my case, it's gonna become roboto. And that just means we don't have to go through  and style all the different tags to say they're roboto. I don't have to go through and say, uh, this container  iso this PT tag here, iso, um,  this H one doesn't have to be roboto.

I can just say everything inside the body is roboto  and they all come along for the right. What's also good is that say  that we don't want the H one to beo. Okay? And, but he says  because he is inside the body tag, he's beguno. What I can do is, um, the body is quite broad in terms  of um, what it does. It's kind of a broad sweeping stroke.

So if I style this to be SAYO and be red,  but I want the H one to be,  but I want it to be green, all I need  to do is style the H one. And what will happen is the H one is more specific  so it'll override the body. So you can have this underlying body tag styling,  just the basics, maybe the font,  maybe the font size or maybe the color. And then you can have more specific stuff like the H one  or the P tag or the links or list items. You'd be more specific with the colors  with those specific tags. So what I'm gonna do now is change the body tag  and that will mean everything inside of here.

Any tags that I create are gonna become robot. To do that, I need to style the body tag. And there's a couple of ways  I'm gonna go with the live view. I'm gonna click inside here anywhere. And you can see here the body is way,  way back up on the breadcrumbs. In my tag selector.

I'm gonna click body  and I'm going to say in my CSS  and I'm gonna create, uh, is there already a body in here? There's not. So I'm gonna create a new selector  and I don't want body PI just want to style the body. Okay? Head into twice  and I'm gonna say you my friend are going to be Roberto. So I've got a tag, he's here in CSS.

I can't pick it from here. So if I click on text  and I click font family,  I could do it if I was using Edge fonts,  but I'm not, I have to do it the longer way. So I'm gonna go into my main CSS in the code view, sorry,  under source code in the HTML. You can see here I've still got my link  to Roberto and Roberto slab. So that's there. Next I need to go  to main css, find my body.

Now the body, because he is such  broad, he should be at the top. So I'm gonna copy him. So I'm gonna cut him. Okay, so selected both the um, open and close parentheses. I'm go right to the top and he should go up the top here. Best to have a body right at the top.

And then later on this H one can override it  because CSS works from top to bottom. Okay, so the body's at the top  and then something more specific happens later  on, which is the H one. It's gonna override it. So I'm gonna put it in here  and I'm gonna jump back to Google, find out  what the CSS should look like. Now I'm copying this to make it easy. Um, you can type it in obviously font family,  Roberto, there he is there.

And I'm gonna say all the body be this font here. What I might do while I'm here  as well is I'm gonna change the font. Uh, actually I might change the color. To do the color, you gotta spell it the American way. And you type in color colon. And in my case I know that I want white,  which is hash FFFF, FF.

And I'm gonna close it with a semicolon. Great. So it means that all the fonts on my website. Now, if I jump back to live view  and let's just do a file save. All fonts that are gonna appear on my website are going  to be this new roboto. It doesn't look much different from Ariel,  but if you're a bit of a top type nerd,  it looks a million times better.

And you can see down here, here's come along for the ride  and everything inside here now is white  and it is going to be this Roberto. Great. And that's how to work with Adobe Edge fonts  and Google Fonts.