Video: 25 of 54
Hi my name is Dan and in this video we are going to look at adding fonts to your website. Now there are two kind of main ways you can add fonts. One is your boring old system fonts; things like Arial, Times New Roman, and Verdana. And the other way is to use hosted fonts. And that would be a surface like Adobe’s web edge fonts or you could use Google fonts. So we will look at both of those. So lets first look at system fonts. So lets look at adjusting this h1. Now I want to change the font of this, I can go to my all, I'm going to go to my main.css, find my h1, find text and font family here, these are my system fonts; boring and there’s not much of a selection there. What we want to do is to look at hosted fonts.
So, hosted fonts, the easy way to get to the Adobe hosted fonts, which are called Edge Web Fonts. Lets go to manage fonts and this pops up. Now these are fonts that Adobe allow you to use for free on you website. And to use one, I an 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 Alfa Slab. And I can click done. Now nothing really happens, what I need to do now is click on h1 and on font family; you will see this one called Alfa 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 so don’t worry too much about it if its not updating locally, it will work when you put it on a website. So that’s edge fonts, you can go through and 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. Because what needs to happen is, I will show you in the background here, in code view, what’s happening is I'm going to go source code. So I'm in html, source code and I'm looking at code view so I am now looking at the html of the page. What you can see now in the head is Adobe has added this bit of script. And it just says that the following script downloads the font blah blah blah. And you can see here, there is the name of our Alfa Slab One. So Adobe are hosting it for us on something called Edge Fonts and it just means when our website is loaded, it goes and gets that font and loads it on our age. Now if we keep adding fonts, its going to 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 because our page would 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, 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, Edge fonts are great, perfect, built in, there’s no reason you can’t use them, but I'm going to cover Google Fonts now. Why? Because Google Fonts is probably the industries standard, as a web designer, you should know all about Google fonts and it’s going to help us learn a little bit more about code and how that works. Okay so I'm going to undo this and its not just a matter of edit, undo, it kind of works. So I'm going to undo, its going to remove that font. What its done is its removed it from the html code but its still here being called as Alfa One and I don’t want it there anymore. So I'm going to bin it and it should go back to its lovely old Arial self. So to work with a Google Font, you need to go to it’s website. Right, so Google has got a website Google.com/fonts, and there is a huge amount of fonts here. We love them; we love Google because they are giving 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 are going to do is, can you see the preview text here? I'm going to type in “lets make this awesome” just to give it an idea of what its going to look like in all the different fonts. And you can scroll through; there are hundreds of them. What I've selected in my Photoshop mock up is I've used two fonts. I've used this one here called Roboto slab and this one down here just called Roboto. 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 Roboto and Roboto Slab, I'm going to use those two on my website. I can find them over here, so I can type in Roboto, and you can see there, the name is down here, Roboto, there’s Roboto Condensed, I don’t want Mono. I want this one here, Roboto Slab and Roboto. So what I'm going to do is I'm going to add to the collection, great, and its added it to this little bottom piece here, I'm going to scroll down, find Roboto Slab and click add to collection.
All right, and now I'm going to 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 going to call them this number here; 400, 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 them. The only trouble is, you’ve got to make sure, and can you see over here, it’s in the green? It means that; remember we talked about earlier if you have to many fonts it takes ages for the page to load? There’s a helpful little guy here to say that you’re still in the green, fine. And down here I've got normal but I'm going to pick this one.
Nearly out the green, and bold, I always end up about here, if you're going for super fast, you want to keep it as low as you can. I'm pressing into the yellow because I love fonts and I love loads of them. Next thing I'm going to do is I'm going to scroll down the bottom here and there’s two parts I need to do. This part here goes into the head, we saw a little earlier there where Adobe puts Web Edge Fonts into the head for us, we have to manually put this in to use the Google one. So I'm going to copy this, select it all and go copy, edit, copy, jump back into Dreamweaver. So to use this font, I'm going to go to my code view, make sure I'm in source code, and I'm going to find the head tag. Because back in here it says, the instructions to imbed your collection 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, there it is in my html.
So I'm going to put it just after the head and I'm going to paste it 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 its got my 400, 300, 500, all the different sizes plus the Roboto Slabs. And now, it’s available to be used on my website. So the next thing I need to do is jump back in to the Google site and you can see here, this is how to use these fonts. Font family is Roboto sans serif, so I'm going to start with the Roboto Slab because we are styling my h1. So I'm going to copy this and you can see it over here, this is how it should look like in your css. So lets go and do that, so jump back in to Dreamweaver, going to go to my main.css, I'm going to find my h1, there he is there. And I'm going to put a return in and add paste and font family colon Roboto Slab and this thing here, this back up is in case Roboto Slab doesn’t load, the browser knows to just go and load just the basic serif font.
Great, lets jump back to live view, you’ll see here it’s now changed to Roboto Slab. Now it’s a little more manual using Google Font, I've got to go through and find all my classes and add either Roboto or Roboto Slab. Its not a big deal and it allows me access to a big volume of fonts that I can sue from Google. One other thing to note for Google Fonts is Google lets you actually download the fonts to use on your machine. And at the moment we are just kind of hinting at them in our code to go off and pull them from our website. If we wanted 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. 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, we are going to scroll to the top here and can you see this little button here? This little insignificant little download arrow, if I click this, it says “don’t worry, you don’t need to download them for work on your website”. But if you do want to work locally or use them in say Microsoft Word or Adobe Photoshop like I have, you can download the zip file. You click it, it will 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 going to jump to my desktop, so check them out in the Dreamweaver exercise files that you’ve downloaded. Go to fonts and you can see here, there’s Roboto and here’s all the fonts and here’s Roboto Slab as well. To install them both on a mac or a pc, just double click them, okay if you double click them and click install on a mac, on a pc its 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 going to change my h1 to the slab, I'm going to change my p tag here, this first paragraph to using just Roboto and I'm going to 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'm going to have to go and change the font for. What we can do just to make it a little simpler for us is we can go and change what’s called the body tag. And the body tag is everything that appears on the page so I will show you on source code. I will go to code view, we talked a second ago about the head, there he is there. Everything that is in the head is everything that the browser sees. So the browser needs to know what font to use, what the page title is and what the description is. The body is what everyone sees 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 as a nice little trick for web design is we can style the body tag and say everything that is inside the body tag become, and in my case, its going to 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 this container is Roboto, this p tag here is Roboto, this h1 doesn’t have to be Roboto. I can just say everything inside the body is Roboto and they all come along for the ride. What’s also good is say that we don’t want the h1 to be Robot but he says because he is inside the body tag he has become Roboto. What I can is, the body is quite broad in terms of what it does, and it’s kind of a broad sweeping stroke.
So if I style this to be say Roboto and be red but I want the h1 to be Roboto but I want it to be green, all I need to do is style the h1 and what will happen is the h1 is more specific, so it will 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 colour and then you an have more specific stuff like the h1 or the p tag or the links or list items, you can be more specific with the colours with those specific tag. So what I am going to do now is change the body tag. That will mean everything inside of here; any tags that I create are going to become Roboto. To do that I need to style the body tag and there are a couple of ways. I'm going to go back to the live view, I'm going to click inside here anywhere and you can see here the body is way, way back up under breadcrumbs. And my tag selector I'm going to click body and I'm going to say with my css, and I'm going to create, is there already a body in here? There’s not, so I'm going to create a new selector, and I don’t want body p, I just want to style the body. Hit enter twice and I'm going to say you my friend, are going to be Roboto. So I've got a tag, he's here in css, I can pick it from here so if I click on text and I click on 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 going to go to into my main css, in my code view, sorry under source code in the html, you can see here I've still got my link to Roboto and Roboto Slabs. So that’s there, next I need to go to main.css, find my body. Now the body, because he is so broad, he should be at the top. So I'm going to copy him, I'm going to cut him, so I've selected both the open and closed parenthesis, go right to the top and he should go at the top here. Best to have a body right at the top and then later on this h1 can override it because css works from top to bottom. Okay so the body is at the top and then something more specific happens later on, which is the h1, is going to override it. So I'm going to put it in here and I'm going to jump back to Google, find out what the css should look like, now I'm copying this to make it easy, you can type it in obviously, font family, Roboto. Now I'm going to say all the body, be this font here. What I might do while I'm here as well is I'm going to change the font, actually I might change the colour, I'm going to spell it the American way and you type in colour, colon and in my case I know that I want white which is #ffffff and I'm going to close it with a semi colon. Great, so it means that all the fonts in my website now, if I jump back to live view, lets just do a file save all. All fonts that are going to appear on my website are going to be this new Roboto. It doesn’t look this much different from Arial but if you're a bit of a type nerd, it looks a million times better and you can see down here, he's come along for the ride and everything inside here now is white and its going to be this Roboto.