Articles, Blog

Using the right web fonts Google Fonts & Typekit – Adobe Illustrator CC 2017 [20/45]

November 5, 2019


Hi, my name is Dan. In this video… we’re going to be using Illustrator
to build UI and web graphics. There’s lots of free stuff here
on my channel, please subscribe. Hit the little bell next to this
subscribe button to get notifications. If you want more, loads more. Check out bringyourownlaptop.com or check out the link
in the description. 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 fonts.google.com. 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 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 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 – I 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 Typekit.com, 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. How good was that? If you want more, go check out bringyourownlaptop.com or check out the link
in the description.

3 Comments

  • Reply Paul Newton May 20, 2017 at 6:31 am

    3 Things to consider or talk to your web-developer about: #1 Fontstacks #2 Optimize # 3 Check Licensing

    #1 Fontstack(aka Fallback fonts) these should be defined by you in advance not generated by tools, Always assume webfonts will fail and what your carefully designed site looks like without special fonts when the browser spits out a generic font. This also applies to what the site looks like WHILE the special font is still downloading aka FOUC.

    #2 Optimize for size, don't load fonts on pages that dont need that font. Does your body copy really need a 1mb fancy font overhead where verdana,etc will do? For services like google-fonts you can request only the characters you need drastically reducing size this is useful for things like headings or Wordmarks that always have a small range of characters.

    #3 always check your licenses usage rights before assuming commercial use is free, there is a legal difference between serving a licensed webfont via an api and redistributing a font.

    https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

  • Reply gavr1loo December 29, 2017 at 9:54 pm

    Nice and clean. Subscribed.

  • Reply Victor Mendoza October 10, 2018 at 6:32 am

    Works perfectly.

  • Leave a Reply