Lessons

Lesson Info

Installing Google Fonts

Alright. It's time to go from boring old Ariel to play fair and Roberto. You may not be as excited as I am, but it's painful. This class is dealing with the real basic fonts for a long time now we get to do pretty fonts. We're going to use something called google fonts. I'm going to show you how to pick them, how to embed them and get the code going as well as kind of ways of how to pick fonts and how to style them to get some inspiration. Alright enough cheddar. More doing, I'll see you in the video. Alright to get started with google fonts, first of all, why are we using google fonts? So, fonts dot google dot com. There are competitors, font squirrel 1001 font style font. There's competitors to it. All you need to do is make sure that it's a font that is hosted for you to use on a website. It's different from fonts that you download to use on your machine. Okay? If you go to Yeah. Dot font and download a free font. It's not something you can use on your website has to be something th...

at is kind of lives in the internet and a good place to find them is something like fonts dot google dot com. The free and I go through kind of how I pick the styles and fun pairing and a few other things after we do the real basics of how to put it in and code because that's that might be all you're here for so I'm going to use a couple of fonts. So up here in the search, I'm gonna type in Roboto. I'm not because it's right there. You might have to type it in. Okay. And click on plus. Okay, that gets added to this little down here. This little fonts selected my little group of fonts that are going to use on my website. The other one I want is up here. It's going to be play fear. Is it two words? No, I gotta spell playwright, brain working. So it's play fair. It's one word. You can see that I'm using just the Playfair display. I'm going to add it. Cool. So we headed down here, that doesn't do much. Let's hit this little button to open it up. Cool. And what we want to do now is we want to customize. Okay, so the moment let's say play fair. There it is there. And Roboto at the moment it's only going to load one version of that font. Okay, now you've got to decide based on your design and that's really important when you are like using a program to design your website, say it's like this XD or sketch or illustrator or Photoshop you using loads of different fonts is going to be a bit painful when your site has the load. Okay, so at the moment I've only got one size. It is the regular size that I've used in my design down here where it gets to the body copy, I've used Roboto and I've used the light version and I haven't used anything else. Okay, but you'll probably find you might need to use a bold as well, maybe an italic. And the only trouble with that or the thing to be concerned about is say I do need the bold version and the regular italic, you can see this thing here saying, hey, you're website is going to be taking a moderate time to load. That's why you're orange down here and you say actually I want regular and I've got light and I want medium as well. And if it's bold you can see here bad, it's gone red and said your website is going to take forever to load. And why is that bad? It's bad for the user in general. Okay. So the person goes to your side and it takes ages to load because of the fonts and that's probably not going to be worth it or at least a consideration. You need to keep in mind. The other thing is that google uses page speed or load speed is one of its search algorithm ticks. It's not the only thing, but it's one of the things to consider if you if you're building a site that really needs to rank well in google results, which most sites do you just need to make sure you're not killing yourself by putting too many fonts on there. Okay, so I've got at the moment just the regular and I just need the light version and I probably really bold at some stage because my site is not very big at the moment. It's not really got to that point, but let's just keep it light. Alright, so we've customized it, we want it now, we need to add it to our site. And the cool thing you can do just while we're here is no, I'll cover that a little bit. Let's add it to the site, click on in bed. So like we did when we imported that google map, it's really easy. They do all the work for you. You grabbed this bit and you copy it. I'm using command C on my Mac control C on a Pc and it says put this in your head. Well I can do that. So let's copy it over here in visual studio code. But here's our head tag opens, closes. Where's it gonna go? I'm gonna paste it into the bottom there. They don't say where to put it. So I'm just gonna paste it there. You can kind of see what it's added. It says, hey, when this page loads, go get the fonts, Okay, these fonts, I want to get font Roboto and play fair and the weights. I want you to download this one that must be for both of them. Okay, So Oh and the other one is called display. So you can change these, say later on, you're like, actually I don't want to use that. I want to use the 500. Okay, Which is the heavier font you'll notice that they don't use, They say bold, but the code refers to it as 700. Okay, so if I wanted 700 now and not the 300, I can just add it there rather than going back to Google and trying to customize it again. Alright, so it's half added, you added to the HTML and then you've got to add it to where you want it to apply. So in our case we've got my body copy, I would like it all to be Roboto the moment I've got it set to aerial. So it's going to go in here and grab the embed and we're going to find so that in the head, this in the CSS and I'm gonna grab the Roboto one copy all of that and just replace all of this. Nice save now and hopefully in my browser that is now Roboto. And you're like, it doesn't look much different from aerial. It is so good, Roberto's are, it's like the most generic other open sands. Source sands and Roberto are the body copy for online. Okay, It's the most commonly used one. Let's apply a little bit more one that's a little bit more specific or at least a bit more visually different. So is this play fair, Click copy and I'm going to add it to my site. I'm going to do my H1. Okay, sit down here. Do paste it in save it preview. Look at that play fair. The margins all messed up. We'll play around with those soon. But that's how to implement it, dump it into the head and then add it to the CSS. Now I said I'll show you how I pick fonts and this is a bit more like just creative like how I go and pick my fonts. So nothing technical you're gonna learn here so you can speed off to the next video if you're hurrying. But if not hang around, let's talk about because I'm doing this design process. Right? So I'm using adobe XD. You could be using something like, I don't know, power point if that's where your skills are or Photoshop to do web design illustrator to do web design. I've got courses on all of these. If you want to go check those out. But let's say that you're using XD and you're not going to have Roboto or play fair on your computer. Okay to actually start using Okay, but you want to mock it up on your actual design before you go and implement it to the website. So what you do is in the same place and google fonts. You get to the exact same bit. You go all right, I want to download all of these and you add them to the group like we did. And at the top here. Okay, at the top of this. Little see the little arrow here. That was the thing I was gonna try and show you earlier on but we separated out click on this and the cool thing about it is that will download those fonts onto your computer and you can double click them, open them up and they will install and they're free to use their real cool, it's a good way of getting free fonts. Okay, what you might do if you're downloading them for your own computer, is actually go into customize and go through and just take them all and the cool thing about them is you can use them for graphic design as well as web design. Okay, so yeah, just a great resource for fonts. So you know how to download them. Let's talk about how to pick them and what kind of depict styles. So we're gonna go back to google fonts. I'm just clicking on the logo here. Google itself has some nice features. Okay, whereas say we're doing some headings and I want to find some heading fonts display is the general term for like a little bit more creative headings, font. So you can go through this april I like him and you know, and find the thing that's going to work for you. Okay, Same with body copy, you're either going to do a serif or sans serif. Okay. One the difference is a serif font is like times roman. It has all the extra little feet on the ends. Those are called serif. And sans serif is without feet. Okay, so it's kind of a more common one. And a really easy thing to do. Like a real this is not going to be font 101, but a real basic way to pick fonts for your site is to always pick an opposite. So if your headings are a serif font, Okay, pick a sans serif, body copy that kind of there's enough of a visual change in them to It's a really good starting point. It's very hard to get to serif fonts. Okay. To be the heading and the body copy font, because often the changes aren't big enough to have a nice visual kind of distinction between the two. So a nice easy way is to yeah, one For the title and then one for the body copy. Another rule is just pick two fonts or one font can work if there's enough of a so a sans serif font like Roboto you could use for the whole site. Why? Because there is a bunch of different sizes for it. Okay, so the blacks, really heavy and very distinctive. So you could use that for the headings and then use the medium or the regular for the body copy. That will work fine. To some of these fonts just don't have a lot of variety. Okay, they might only have a couple of sizes. Another thing you can do in here, is that the placeholder text in here? You can actually click on it. Okay, you can't open my name. Okay. Say you're doing a design for somebody and you need to apply to all fonts. Okay? Because sometimes you download a font, right, and you're like, that looks awesome. And then you download it and actually type in your letters and you're like, man, it looks lame, you know, look good on the line, but when you downloaded it it doesn't look good. So you can you can do it all here, play with the sizes and the weights and that's kind of fun. Other things you can do when you are picking say, especially a heading font. Okay. For our design here, it's not too bad. We've got we've got three words across the top but our side is quite small. Let's say you're doing a site and it's full of blog posts or articles or recipes or I don't know. And but you're gonna have lots of varying sizes or lengths of titles. Okay. Some might be just 20 characters and some might be 40 characters, it's really handy. You don't have to but it's a consideration. I definitely take into account is to do with the width. Okay, if I drag this turn width on and I drag it down, I'm going to give myself access to let's turn these all on. I'm going to give my access myself access to fonts that are just thinner. Okay. And you can just get more on the line to say this one here or this one here and they're not all great. Okay. But let's say we do like, let's go up one more to get a bit more variety. Doesn't really matter Dan. Just pick one. See this one here instead of using the one we're using Playfair. This one here has the potential of fitting more characters on a line and not breaking into two. Okay, so with is uh something to look at, but let's say you're just like, I don't, I still don't know how to pick up and use the term font pairings pairings is a really useful term. Okay. I just put in google font pairings and I put in today's this year's date. Okay. Because yeah, there's some old stuff around and I just wanted contemporary stuff. Okay, do a search for that. I clicked on the top two results. Don't worry about these websites do the same sort of thing. And to see where you're at 2020 and you can see the cool thing about font pairings is that somebody, you know, in this case it is Debbie morrigan, she's gone through and picked fonts that go nicely together and put them in situ, which I really like because yeah, you can get some cool design ideas and she's picked. You can see serif sans serif serif sans serif. It's not always true, but kind of a can see sand served served and font pairings you can just go all right, I'm gonna use railway and later. Okay. And all of these two or combinations of them all you pick your own, but it's just handy to find other people. Cool. I really like this one. I've never seen that one before. Alright, so font pairings handy. Google fonts is a place, it's the main place. There are other options for this Dobie do it, font squirrel does it. There's a few other places that do free fonts or even paid fonts, but to implement them, it's super easy. Just add the code to the head tag and then add it to your CSS of the thing you want to style. Alright, buddies, that was it for fonts, our websites and I look a little nicer now with our gradient and our fonts. I'll see you in the next video