Illustrator - UI & Web Design using Adobe Illustrator

Using the right web fonts Google Fonts & Typekit.

Daniel Walter Scott || VIDEO: 1 of 45

Download Exercise Files



You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

In this video we're going to look at bringing in really specific web safe fonts, from Google Fonts, and Typekit, like this little sexy guy here, and these little plain Janes, but very cool fonts up the top here.

What we've got in-- we just used plain old text, you might have used Arial, by default Illustrator loves Myriad Pro, so what we need to do now is switch it out for the font that we want to use. Now, you can’t just go through your list and go, “I want to pick all these fonts I've got on my machine,” you might have hundreds, you might only have a few, you can't just go and pick any of them, they need to be specific fonts that can be used online, since they’d just be licensed online, and if they're paid for, paid for that license, and if they’re commercially usable, go off and use them.

There's kind of two main places you're going to do if you're an Illustrator person. There's one called Google Fonts, or Typekit. Now, in my experience-- it depends on what you're doing. Google Fonts, I find it's just easier, they're a bit harder to implement but they are better in terms of licensing. What happens is, Google Fonts are free for commercial use, which is great. Typekit are freely used with your Creative Cloud license which is perfect for my portfolio here, because I'm not using it for anything else, only 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-- their website will have a license for that font, or I'll have to use my Creative Cloud license to keep their site, using the right font, and if I decide to move into Himalayas, and wrap up all my digital life means that their font will stop working because I'm not paying for my Creative Cloud license. We'll look at both of them, they’re both cool, both easy enough to use, so first of all let’s go have a look at Google Fonts.

First up, go to I really like Google Fonts, there's loads of them, and a couple of cool things you can do with them, is on the side here, say you need a handwriting font, kind of really hard to find, let’s just hit handwriting, and obviously, just going to give you lists for handwriting fonts. I'm going to turn them all on. Some of the other nice things down the bottom here are, you can play around with, say the thickness, and what that means is-- sorry, not the thickness, I want width. Width can be really useful when-- you can lower it down-- so you can kind of get a nice compact or compressed font, or condensed font, just a bit thinner, it just means, especially when you're working online, if you get some of these really thin ones, you can get a lot into a title without it breaking into two lines, so you can see, you can fit quite a bit of words on this one, whereas if you land up with a really wide font, you can see it's a lot further apart. 

Regardless, there are two things you need to do. One is, pick a font, so ‘Roboto’, and probably ‘Open Sans’. If you're looking for like a body copy font these are the most common, Open Sans is probably the most common, it’s the new Arial, everyone uses Open Sans because it's clear, it's nice, it's got lots of different weights and it works good in different languages. So, what I'm going to do is I'm going to pick - I've actually just spent some time having a look through, and I've decided I'm going to be using this one called Playfair, 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, you might think it looks good here but then it looks terrible on the words you need, so, you can see I can just type over the top of it just to see what my name looks like, looks okay. 

So once you've picked one 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, and all the different kind of usage, and one of the useful things as well is it kind of gives you like a matching corresponding font. We're going to use this for our titles and our big headings, but then we need that kind of more simpler font for the body copy, or our paragraph text, and you can see down here, it's given me an option, it says, “Try Raleway.” This one, or this one? I've opted for this one, Open Sans Condensed. Probably not the light versions, maybe a bit too hard to read online in terms of usability, but it just gives you options, so if you are new, or you're old school and you just need some help picking a nice font. 

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're back in the other screen here you click this little + button. It adds just at the bottom here called 'Collections', and you can add the fonts to it. Now, how many do you add? Really, you just need two, kind of comes down to more, there's a mixture of just font rules, if you have 10 fonts on your site it's going to look terrible, so keep it to a minimum, generally two, a heading font and a body copy font, you can have three if you need it. I'm going to add this one and then I'm going to find up here, ‘Open Sans’, and there's ‘Condensed’ here, and I hit '+', so both together, and I pop this open. 


Now there's a couple of things I need to do. I'm going to click on 'Customize', because I’ve got to decide, of these fonts, which do I want? And what I actually want is, I want the bold one, and I'm not going to use the regular one in my design. What you could do is you can actually just turn them all on, because we're at concept stage right now, we're not sure which one we're going to use, just download them all. You don't want to use them all though in your actual finished design, just pick one or two, because you can see, the more time it's needed to load your page, and a slow loading page is bad for a couple of reasons, you’ll usually spend 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 at my design stage, I will pick just one or two.

Over here, there's this obscure little arrow, this thing, it says ‘Download Selection’. The cool thing about this is it will download, and I'm going to put it into my exercise files, they’ll be there ready for you to use in your own-- so you don't have to go through this process, you can start using them. Downloaded them, here they are, open up the zip, and on a Mac, on both actually, on Mac and PC these are pretty easy to implement. So I'm going to open up Open Sans, and I'm going to double click all of these, and it’s going to open up, and I click ‘Install’. I've already installed them on mine earlier. Do it for both of them, 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, ‘Open Sans’, ‘Condensed’, and I'm going to use - can't remember - I'm going to use the ‘Bold’ one I think I’m using, I think it's ‘Bold’.

Cool! So what we've done is we've downloaded them to use on our computer, and a sneaky cool thing is you can use them for all sorts of stuff, doesn't have to be a web design, you just got a whole bunch of cool fonts now to use, Google allows 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 use those fonts in a special way when the website gets built. Just call Google and say, "We're using these fonts, please," and Google says, "No worries," and makes them work on your website. So we've just downloaded them at the moment to use on our desktop. Perfect.

Go to, and in here click on fonts, you have to log in with your Creative Cloud license – You can see my little face up there - and you can type in a bit of sample text. The one thing you need to make sure is that-- Typekit has some that are desktop use only, and some that are web use as well, so you want to 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, that can't be.

Over here, same things like Google, you can click on-- say I want script fonts only, and it kind of separates this down just to the script fonts. I want to find maybe a ‘Sans Serif’. You can do the same thing with them, how wide they are, how heavy they are, all sorts of cool stuff. It gets a little easier to start implementing. Say I love this font here, this 'Sutro', and I click on it, I decide which one I want to use, I want to use this, ‘Deluxe Fill’, I love it, click on ‘Sync’. What happens is, in the background-- actually it's installing it on your machine, which is pretty crazy, you can see it's just kind of installed there, so 'Sutro'. It's a little bit easier than the Google Fonts. 'Sutro'. Great! And I can start using them. 

Remember, the only problem with Typekit is that 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're going to have to explain that this font is licensed, it's a paid yearly cost, and you'll add that to your web design. Just to make sure that they all know there's an extra cost for those fonts, so I often just go to Google Fonts because there’s no extra cost. The font libraries are different, if there's a font that they love, and it's in Typekit, you can tell them they can use it, but it has to be licensed. I'm bumbling now. There are other sites to go to, one other one is Fontskrill, it's quite like both of them, but in between, I like Google Fonts though. 

So that was a particularly long explanation of how to use fonts.