But the next thing we're gonna do is look  at changing our fonts. Now, by default, kinda old school web design,  you only had some really basic fonts to pick from,  like Ariel and Georgia and Times. What we can do now though, is we can pick a  huge variety of fonts. Now, there's a couple of methods to do it. Probably the most common one to do is something  called Google Fonts. And that's what we'll do in here  because it's quick, it's easy, it's free.

You can also use type kit or Adobe Edge web fonts  or squirrel fonts. There's lots of different ways  of implementing fonts onto both your desktop mockup  and through your website. The big thing to know that is that not all fonts  that you have on your machine will convert  and be able to be used online. So the way to check is to use a service like Google Fonts  to find a font that you want to use. So let's do that. Let's switch out to Google Fonts.

Okay? So google.com/fonts  and Google have got a whole lot  of commercial use fonts that we get to use. So what I'm gonna do is I'm gonna look for a font. So I'm gonna use preview text of BYOL  because that's the font that I'm looking for. I'm gonna go through and pick a font. Now I'm gonna use Roberto as my body copy font,  and I'll use the, there's another one called Roberto Slab  that I'll use for my headings.

So to be able to use these web fonts on your desktop, okay,  via Photoshop that they can later then  be used on your website. What you need to do is pick on one of them,  click add to collection. Uh, so I'm gonna use another funnel. I'm gonna type in Roboto here,  and I'm gonna put in,  there's another one I've found called  Robotic Slab that I want to use. I'm gonna add that to collection. So I've got two added to my collection, the normal one,  normal roboto, and this robotic slab.

Now what we're gonna do is click use. Now it's just pick the basics. Okay? The normal version. What I want is I want a light version,  and I'd like a bold version. And I'd like this one here.

A light version. Oh, a light version, and a bold version. Now, the more fonts you add,  you could add all of these and download them. That's totally fine for while you're working on  your Photoshop mockup. But what will happen is if they all have  to be used on your website,  it's gonna make the page load a little slow. So you can see over here, Google's giving you a little kind  of speed counter, knowing that the ones I've got is in the  green area, as in it'll load fast enough.

You start getting to orange, okay? It's gonna slow it right down. And red is way too many fonts downloaded for a page,  and it's gonna have lots of slow,  it's gonna impact your page load time too much. So once you've got them,  what we're gonna do is we're gonna download them  to use on our machine. To do that, there's this little arrow at the top here, okay? Here's a little download button,  and I'm gonna download this collection as a zip file,  and I'm gonna stick it onto my desktop.

Now, for you guys, if you wanna follow along,  I've already got the fonts ready for you to go  and downloaded ready in the exercise files. So download the exercise files,  and you should find them in the fonts folder. Now, to install the fonts on your machine, uh,  it depends if you're on a macro pc,  actually, essentially they're the same. If you've got a modern PC  or a modern bank,  you essentially just double click the  fonts and they will install. So this is the font that I just downloaded  from a Google fonts. If you are looking for the same things they're in  here in your example files,  If you, you don't want to go through the hassle  of downloading these, okay?

But I have, I'm gonna double click the zip file. It opens it up. There's my little fonts folder,  and here are the two groups of fonts. So I'm gonna twirl that down. And what I wanna do is I'm gonna select all of these, okay? And I'm gonna double click them.

I'm gonna click install, and my little Mac's gonna charge  away and install all of these fonts here. Mine have come up with an area now just to say  that they're already installed. Okay? 'cause I've done it previously before this tutorial. Yours won't have them. Okay?

Close on my fonts folder, and you'll have  to do the same four robot slab, okay? Select all of these, double click them,  and they'll all install. Now, on a pc, it's a really similar process. If you're unsure how to install them on your machine,  either drop me a message  or have a little Google to see  how you can install 'em on your machine. Now let's have a look in Photoshop. Now, what you won't have to do is,  the good thing about Photoshop is you won't have  to rein restart it  or restart your machine or anything like that.

Photoshop will pick up your new fonts. You can see here's my robotic fonts,  and they're ready to start being used in my design knowing,  because we use Google Fonts. It's a font that we can use online for our website. In the end.