How to choose & install google fonts on your HTML CSS website

All right, it's time to go from boring old Arial to Playfair and Roboto. You may not be as excited as I am, but it's painful, this class. Still in 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, where to get some inspiration. All right, enough chatter, more doing. I'll see you in the video. 

To get started with Google Fonts, first of all, why are we using Google Fonts? So fonts.google.com, there are competitors, Font Squirrel, 1001 Fonts, DaFont, there is 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. If you go to Dafont, and download a free font, it's not something you can use on your website. It has to be something that is, kind of lives in the internet, and a good place to find them is something like fonts.google.com They're free, and I'll go through kind of how I pick the styles, font pairing, and a few other things after we do the real basics of how to put it in encode because 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 going to type in 'Roboto', I'm not, it's right there. You might have to type it in, and click on '+', that gets added to, down here is the little Font Selector, my little group of fonts that I'm going to use on my website. The other one I want is up here, it's going to be Play Fair, is it two words? No, I've got to spell play right. Brain working, so it's Playfair, it's one word. You can see there, I'm using just the Playfair display, I'm going to add it. Cool. So it's added down here, that doesn't do much. Let's hit this little button to open it up. And what we want to do now is we want to customize. 

So at the moment, let's say Playfair, there it is there, and Roboto, at the moment it's only going to load one version of that font. 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, using loads of different fonts, is going to be a bit painful when your site has to load. 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, but you'd probably be fine, 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, it's saying, "Hey, your website's going to be, take a moderate time to load," that's why you're orange, but down here you say, "Actually I want Regular, and I've got Light, and I want Medium as well, and I've used Bold, you can see here, bad. It's gone red and said, "Your website's going to take forever to load." And why is that bad? It's bad for the user in general, so the person goes to your site, and it takes ages to load, because of the fonts, and that's probably not going to be worth it, or at least, the 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'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. So I've got, at the moment, just the Regular, and I just need the light version. I probably would need Bold at some stage, because my site's not very big at the moment, it's not really got to that point, but let's just keep it light. 

So we've customized it, we want it, now we need to add it to our site, A cool thing you can do, just while we're here is, no, cover that in a little bit, let's add to the site. Click on 'Embed'. So like we did when we imported that Google Map, it's really easy, they do all the work for you. You grab this bit, and you copy it. I'm using 'Command C' on my Mac, 'Ctrl C' on a PC, and it says, "Put this in your head." I can do that, so let's copy it over here in Visual Studio Code, but here's our Head Tag, opens, closes. Where is it going to go? I'm going to paste it into the bottom there. They didn't say where to put it, I'm just going to paste it there. 

You can kind of see where it's added, it said, "Hey, when this page loads go get the fonts." These fonts, I want to get Roboto and Playfair, and the weights, I want you to download this one. That must be for both of them. 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", which is the heavier font, you'll notice that they don't use, like, they say Bold, but the code refers to it as 700. So if I wanted 700 now, not the 300, I can just add it there rather than going back to Google, and trying to customize it again. 

So it's half added, so you add it 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. At the moment I've got it set to Arial, 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 going to 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, "Doesn't look much different from Arial." It is, it's so good, Roberto is a, it's like the most generic. Open Sans, Source Sans, and Roboto are the Body copy for online. It's the most commonly used one. 

Let's apply a little bit more-- one that is a little bit more specific, or at least a bit more visually different, so is this Playfair. Click 'Copy', and I'm going to add it to my site. I'm going to do my H1. So down here, I'm going to do, paste it in, save it, preview. Look at that, Playfair. The margin's 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, this is a bit more like just creative, like how I go and pick my fonts. 

So nothing technical you're going to 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, so I'm using Adobe XD, you could be using something like, I don't know, PowerPoint, 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. You're not going to have Roboto or Playfair on your computer to actually start using, 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, in 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 up the top here, at the top of this little, see this little arrow here, that was the thing I was going to try and show you earlier on but we separated out. Click on this. The cool thing about it is that will download those fonts, on to your computer, and you can double click them, open them up, and they will install, and they're free to use. They're real cool, it's a good way of getting free fonts. 

What you might do if you're downloading them for your own computer, is actually go into Customize, and go through and just tick them all. The cool thing about them, is you can use them for Graphic design as well as Web design. 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, how to pick styles. So we're going to go back to Google Fonts. I'm just clicking on the logo here. Google itself has some nice features, whereas, say we're doing some headings, I don't want to find some Heading fonts. Display is the general term, for like a little bit more creative headings, you know, fonts. So you can go through this - oh, April, I like him. - and find the thing that's going to work for you. 

Same with Body copy, you're either going to do a Serif or a Sans Serif. The difference is, a Serif font is like Times New Roman, it has all the extra little feet on the ends, those are called Serifs, and Sans Serif is without feet. 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 Font101, 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, 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 two Serif fonts 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 pick 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. So the black's 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 too. Some of these fonts just don't have a lot of variety. 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, you can type in my name, say you're doing a design for somebody, and you need to apply to all fonts, because sometimes you download a font, 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." Looked good on the line, but when you downloaded it, doesn't look good, so 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, for our design here it's not too bad, we've got, can you see we've got three words across the top, but our site 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, but you're going to have lots of varying sizes or lengths of titles. 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. If I drag this, I 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 myself access to fonts that are just thinner. 

You can just get more on a line. So say this one here or this one here, they're not all great but let's say we do like-- let's go up one more to get a bit more variety. It 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 a potential of fitting more characters on a line, and not breaking into two. So width is something to look at, but let's say you're, it's like, "I still don't know what to pick," use the term font pairings. Font pairings is a really useful term, I just put in 'Google font pairings', and I put in today's, this year's date, because there's some old stuff around, and I just want contemporary stuff. 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 just see where you're at, 2020, and you can see, the cool thing about font pairings, is that somebody, in this case it is Debbie Morgan, 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, Serifed, Sans Serifed, Serifed, Sans Serifed. It's not always true, but it's kind of a, you can see, Sans Serifed, Serifed. And font pairings, you can just go, "All right, I'm going to use Raleway with Lato." And more of these two, or combinations of them all. You pick your own, but it's just handy to find other people-- I like this one, I've never seen that before. 

So font pairing is handy, Google Fonts is a place, it's the main place, there are other options for this. Adobe do it, Font Squirrel does it, there's a few other places that do free fonts or even paid fonts, but to implement them is super easy. Just add their code to the Head tag, and then add it to your CSS of the thing you want to style. 

All right buddies, that was it for fonts. Our website's going to look a little nicer now, with our gradient and our fonts. I'll see you in the next video.