Preview
Video Player
00:00
00:00
Google Fonts
4:59In our last video, we learned how to provide a web font along with our website files and include a reference to our font in our CSS. And while that was great practice, most of us probably don’t have a bunch of web fonts sitting around on our computers to upload to our website. Plus, uploading web fonts requires a license from the type foundry granting you permission to do so. So the method we just learned isn’t one you’ll put into practice all that often, but it forms the foundation for our next lesson, in which we use the web’s most popular online library of free web fonts.
In our last video, we learned how
to provide a web font along with
0:01
our website files and include
a reference to our font in our CSS.
0:06
And while that was great practice,
most of us probably don't have a bunch
0:11
of web fonts sitting around on our
computers to upload with our website.
0:16
Plus, uploading web fonts requires
a license from the type foundry
0:21
granting you permission to do so.
0:26
So the method we just learned isn't one
you'll put into practice all that often,
0:30
but it forms the foundation for
our next lesson
0:35
in which we use the web's most popular
online library of free web fonts.
0:39
Google Fonts has quite a few advantages.
0:45
It's free,
it offers over 1,000 web fonts, and
0:48
the interface is fairly
straightforward to work with.
0:52
But when you first arrive,
0:55
it's easy to feel a bit overwhelmed
by the choices offered.
0:58
The best way to get started is to
settle on a category of fonts.
1:02
I'm looking to improve my body copy for
my Lake Tahoe site.
1:07
So I don't want a handwriting or
display typeface,
1:12
as these are only useful for small
bits of copy, like a heading or logo.
1:16
I can also eliminate
the monospace category.
1:22
Monospace means every character
has the exact same width,
1:26
which is useful for coding.
1:30
Our workspace is in a monospace typeface,
but it's not great for web body copy.
1:33
So that leaves us with
serif versus sans serif.
1:40
And while either can work great for
web body copy,
1:44
I'm going to focus on the sans
serif category for now.
1:47
Sans serif means our letters won't
have decorative strokes at the end,
1:52
the way a serif typeface
like Times New Roman does.
1:57
That narrows our choices, but I'm still
not sure which one is appropriate for
2:01
my Lake Tahoe body copy.
2:06
I'll try switching
the preview to paragraph and
2:09
choosing one that's easy to read.
2:12
I'll try clicking on Work Sans.
2:17
Work Sans is available
in nine font weights,
2:22
everything from ultra light,
represented by the number 100,
2:26
to heavy, represented by the number 900.
2:32
And while it's possible to include
all nine weights in our style sheet,
2:36
we shouldn't include more than
we absolutely need, as doing so
2:40
slows down page performance.
2:45
I'm going to select Light 300,
2:47
Light 300 Italic, and Bold 700.
2:52
And look at that, Google Fonts has
provided an embed code with instructions.
2:58
Let's first copy the link elements and
paste into the head of
3:06
our HTML document right above
the link to our own style sheet.
3:12
Then we can copy the font
family declaration and
3:20
apply it to our body selector.
3:25
Notice that I changed our text color and
included a font-weight declaration
3:42
to specify the light or
300 version of the Work Sans web font.
3:48
And when we preview in the browser,
our body copy is in Work Sans Light.
3:54
You might notice that we never wrote
a @font-face at-rule this time, but
4:03
that doesn't mean we're not using one.
4:07
I'm going to copy the link from Google
web fonts and paste into a browser.
4:10
And when it loads, you can see that
Google Fonts has written the font
4:17
face at rule for us and
provided Work Sans in the WOFF format.
4:22
Great, now you have a handy free resource
for adding new web fonts to your webpage.
4:28
Just remember to use
Google Fonts sparingly.
4:35
It might be tempting to combine six or
seven typefaces in one web page,
4:39
but doing so
would really slow loading time.
4:44
Now that we've improved out typeface,
we'll use the remainder of this stage to
4:49
work on the size and
the spacing of our text.
4:54
That's coming up next.
4:57