Okay. In this video we're gonna look at bringing in a really  specific web safe fonts, okay? From Google Fonts and Tuck, like this little sexy guy here,  and these little plain Jane,  but very cool fonts up the top here. Okay? So what we've got in, we just use plain old text. You might have used aerial.

Um,  illustrator loves Myriad Pro. Okay? So what we need to do now is switch it out  for a font that we want to use, okay? Now, you can't just go through your list  and go, I want to pick all these fonts  that I've got on my machine. Okay? You might have hundreds, you might only have a few.

You can't just go and pick any of them. They need to be specifically fonts that can be used online. Essentially just be licensed online  and if they're paid for, pay for that license. And if they're commercially, um,  usable, go off and use them. And there's a, there's kind  of like two main places you're gonna do,  if you're an illustrator person,  there's one called Google Fonts or Type Kit. Now, in my experience,  it depends on what you're doing, okay?

At Google Fonts, I find it just easier. They're a little bit harder to implement,  but they are better in terms of licensing. What happens is Google fonts are free for commercial use,  which are great type kit are free to use  with your creative cloud license, which is perfect  for my portfolio here  because I'm not using it for anything else. Um, you know, it's for my portfolio. But let's say I'm building it for a client  and they don't have a creative cloud license. They'll have to use, you know,  their website will have to license that font.

Or I'll have to use my Creative Cloud license to kind  of like keep their site using the right font. And if I decide to, I don't know, move to the Himalayas  and uh, like wrap up all my digital life means their font  will stop working because I'm not paying  for my creative Cloud license. So we'll look at both of them. They're both cool, both easy enough to use. So first of all, let's go look at Google Fonts. First up, go to fonts.google.com Okay?

And you get here, I really like Google Fonts. There's loads of them. Um, a couple  of cool things you can do with 'em is on the side here. So you need a handwriting font, okay? That can be really hard to find. It's just have handwriting  and obviously just gonna give you lists  for handwriting fonts, okay?

Um, so I'm gonna turn them all on. Um, some of the other nice things down the bottom here are,  you can play around with say like the thickness. Um, what that means is, sorry, not thickness, I want width. Width can be really useful when you can lower it down. So you can get a kind of like a nice compact  or compressed font, okay? Or condensed font, just a bit thinner just means,  especially when you're working online, if you get some  of these really thin ones, okay,  you can get a lot into a title without  it breaking onto two lines.

You can see here, you can fit  quite a bit of words on this one. Whereas if you're looking for a, if you end up  with a really wide font,  you can see it's a lot further apart. Okay? Regardless, there's two things you need to do. One is, uh, pick a font. Okay?

So robo and probably open sands. If you're looking for like a body copy font,  these are the most common. Open sands is probably the most common. It's the new aerial. Everyone uses open sands 'cause it's clear, it's nice,  it's got lots of different weights  and it works good in different languages. So, um, what I'm gonna do is I'm gonna pick,  I've actually just spent some time having a look through  and I've just decided on,  I'm gonna use this one called play fair.

Okay? I really like it. This one  here, it's got some good weights. What you can really do to make it, like,  sometimes you pick a font and it doesn't look good. Like you might think it looks good here,  but then it looks terrible in the words you need. Okay?

So you can see, I can just kind  of like type over the top of it just  to see what my name looks like. Ooh. Looks okay. Um, and so once you pick one, right,  you can click on actually  before you go through, you can click on the name  and it just gives you like a bigger sample of it all. Um, all the different kind of usage. And it, one of the useful things  as well is it kinda gives you like a, a,  a matching corresponding font is we're gonna use this  for our titles and our big headings,  but then we need a kind of more simpler font  for the body copy or our paragraph text.

Okay? And you can see down here, it's given me an option. It says Try railway. Okay? And or this one or this one. Okay, I've opted for this one.

Uh, open sands condensed. Okay? Probably not the light version. It's maybe a bit too hard  to read online in terms of usability. Okay bud. It just gives you options.

So if you're new or you're old school  and you just need some help picking a nice font, okay? So what we do is we pick this one  and then find it at the top and we say select this font. Or if you are back in the other screen here,  you click this little plus button, it adds it  to this bottom here called collections, okay? And, uh, you can add the fonts to it. Now how many do you add? Really?

You just need two. Um, kind of comes down to more is a mixture  of just font rules. If you have 10 fonts on your site, it's gonna look,  uh, terrible. Um, so keep it to a minimum. Generally two, a heading font and a body copy font. You can have three if you need it.

Um, so I'm gonna add this one  and then I'm gonna find up here. Uh, open sands. Okay, um, open, it's two word actually open sands  and there's condensed here. And I have plus. So they're both together. I'm gonna pop this open.

Now  there's a couple of things I need to do. I'm gonna click on customize  'cause I've gotta decide of these fonts, which do I want? And what I actually want is I want the bold one. And I don't use, I'm not gonna use the regular  one in my design. What you could do is you  could actually just turn them all on. 'cause we're at concept stage now we  are not sure which one I'm gonna use.

So just download them all. Okay? And what you don't wanna use them all though,  in your actual finished design, just pick one or two  because you can see the more time  that's needed to load your page. And a slow loading,  loading page is, is bad for a couple of reasons. As your user will spend ages trying  to download fonts while your page is not loading,  not caring about your amazing font selection. And Google doesn't like it, so they kind  of penalize you in terms of your searches.

So try not to pick too many fonts,  but in my case, I'm downloading them all  because at the moment I'm just, just at my design stage,  I will pick just one or two. But over here this is like obscure little arrow. This thing says download selection. The cool thing about this is it will download, okay? And I'm gonna put it into my exercise files. They'll be there ready for you, um, to use in your own, uh,  you know, so you don't have to go through this process.

You can start using them. But we downloaded them. There they are open up the zip  and on a Mac on both actually Mac and pc. Now these are pretty easy to implement. So I'm gonna open up open sands  and I'm gonna double click all of these. Okay?

And it's gonna open and I can click install. I've already installed them on mine, okay, earlier. Um, do it for both of them. Okay? Select all of these. Double click, they'll install  and you can start using them in Illustrator.

Illustrator doesn't need to be restarted, you'll just find  that they amazingly appear. Okay? Open sands, uh, condensed. And I'm gonna use, I can't remember,  I'm gonna use the bowl one. I think I'm using condensed bold. Cool.

So what we've done there is we've downloaded them  to use on our computer. And sneaky cool thing is you can  use them for all sorts of stuff. It doesn't have to be web design. You just got a whole bunch of cool fonts now to use, okay? Google allow you to use commercially. Now what you're meant to do is pick these ones  and when you later on give your files to a designer  or a web designer or a web developer,  or you're doing it yourself, you'll use those fonts,  uh, in a special way.

When the website gets built, they call Google  and say, we're using these fonts, please  and font, uh, Google says, no worries  and makes them work on your website. Okay? So we've just downloaded them at the moment  to use on our desktop. Perfect. Okay? Go to type kit.com and in here, click on fonts.

You have to log in with your creative card license. You can see my, my little face up there  and you can type in a bit of sample text. Okay? And the one thing you need to make sure is that uh,  type kit has some that are desktop use only  and some that are web use as well. So you wanna make sure that this is ticked to say,  I want ones that can be used on a website  because there's no point designing one, they can't be okay. And over here, the same things like Google,  you can click on say I want scripty fonts only.

And it kind of separates this down just to the script fonts. Okay, I wanna find maybe a slab. Serif, okay. You can do the same thing with the how wide they are,  how heavy they are, all sorts of cool stuff. Um, and yeah, it gets a little easier to start implementing. Say I love this font here, this Sutro.

Okay. And I click on it, I decide which one I want to use. Okay, I want to use this. A deluxe fill, I love it. Click on sync. Okay?

And what happens is, in the background,  it's actually installing on your  machine, which is pretty crazy. You can see it's just kind of installed there. So Sutro. So it's a little bit easier than the Google fonts. Okay. Sutro, where are you?

Sutro? Great. And I can start using 'em. Great. The, remember the only problem with type kit is there is,  uh, it's a paid license. You get it free for your creative cloud.

So for your own stuff it's perfect. But going out to a client, you might have to,  you are gonna have to explain that this fonts is licensed. It's a per yearly cost,  and you'll add that to your web design. Okay? So just to make sure that they all know  that there's extra costs for those fonts. So often I just go to Google Fonts because no extra costs.

The font libraries are different. Okay? If there's a font that they love  and it's in creative, uh, sorry,  in type kit you can tell them, yep, you can use it,  but it has to be licensed. I'm bumbling now. Okay. So, uh, there are other sites to go to.

One other one is Fonts Grill. It's quite like both of them. Okay. But in between I like Google Fonts though. Cool. So that was a particularly long explanation of how  to use fonts.