1
00:00:01,271 --> 00:00:06,215
In our last video, we learned how
to provide a web font along with

2
00:00:06,215 --> 00:00:11,175
our website files and include
a reference to our font in our CSS.

3
00:00:11,175 --> 00:00:16,163
And while that was great practice,
most of us probably don't have a bunch

4
00:00:16,163 --> 00:00:21,920
of web fonts sitting around on our
computers to upload with our website.

5
00:00:21,920 --> 00:00:26,613
Plus, uploading web fonts requires
a license from the type foundry

6
00:00:26,613 --> 00:00:29,010
granting you permission to do so.

7
00:00:30,290 --> 00:00:35,556
So the method we just learned isn't one
you'll put into practice all that often,

8
00:00:35,556 --> 00:00:39,110
but it forms the foundation for
our next lesson

9
00:00:39,110 --> 00:00:43,860
in which we use the web's most popular
online library of free web fonts.

10
00:00:45,370 --> 00:00:48,260
Google Fonts has quite a few advantages.

11
00:00:48,260 --> 00:00:52,079
It's free,
it offers over 1,000 web fonts, and

12
00:00:52,079 --> 00:00:55,990
the interface is fairly
straightforward to work with.

13
00:00:55,990 --> 00:00:58,159
But when you first arrive,

14
00:00:58,159 --> 00:01:02,978
it's easy to feel a bit overwhelmed
by the choices offered.

15
00:01:02,978 --> 00:01:07,980
The best way to get started is to
settle on a category of fonts.

16
00:01:07,980 --> 00:01:12,480
I'm looking to improve my body copy for
my Lake Tahoe site.

17
00:01:12,480 --> 00:01:16,161
So I don't want a handwriting or
display typeface,

18
00:01:16,161 --> 00:01:21,190
as these are only useful for small
bits of copy, like a heading or logo.

19
00:01:22,630 --> 00:01:26,710
I can also eliminate
the monospace category.

20
00:01:26,710 --> 00:01:30,719
Monospace means every character
has the exact same width,

21
00:01:30,719 --> 00:01:33,400
which is useful for coding.

22
00:01:33,400 --> 00:01:40,013
Our workspace is in a monospace typeface,
but it's not great for web body copy.

23
00:01:40,013 --> 00:01:44,670
So that leaves us with
serif versus sans serif.

24
00:01:44,670 --> 00:01:47,910
And while either can work great for
web body copy,

25
00:01:47,910 --> 00:01:51,470
I'm going to focus on the sans
serif category for now.

26
00:01:52,710 --> 00:01:57,407
Sans serif means our letters won't
have decorative strokes at the end,

27
00:01:57,407 --> 00:02:00,720
the way a serif typeface
like Times New Roman does.

28
00:02:01,730 --> 00:02:06,632
That narrows our choices, but I'm still
not sure which one is appropriate for

29
00:02:06,632 --> 00:02:08,200
my Lake Tahoe body copy.

30
00:02:09,290 --> 00:02:12,816
I'll try switching
the preview to paragraph and

31
00:02:12,816 --> 00:02:15,400
choosing one that's easy to read.

32
00:02:17,140 --> 00:02:20,270
I'll try clicking on Work Sans.

33
00:02:22,730 --> 00:02:26,559
Work Sans is available
in nine font weights,

34
00:02:26,559 --> 00:02:32,204
everything from ultra light,
represented by the number 100,

35
00:02:32,204 --> 00:02:36,161
to heavy, represented by the number 900.

36
00:02:36,161 --> 00:02:40,858
And while it's possible to include
all nine weights in our style sheet,

37
00:02:40,858 --> 00:02:45,016
we shouldn't include more than
we absolutely need, as doing so

38
00:02:45,016 --> 00:02:47,910
slows down page performance.

39
00:02:47,910 --> 00:02:52,784
I'm going to select Light 300,

40
00:02:52,784 --> 00:02:58,315
Light 300 Italic, and Bold 700.

41
00:02:58,315 --> 00:03:04,650
And look at that, Google Fonts has
provided an embed code with instructions.

42
00:03:06,590 --> 00:03:12,286
Let's first copy the link elements and
paste into the head of

43
00:03:12,286 --> 00:03:18,105
our HTML document right above
the link to our own style sheet.

44
00:03:20,588 --> 00:03:25,869
Then we can copy the font
family declaration and

45
00:03:25,869 --> 00:03:29,306
apply it to our body selector.

46
00:03:42,483 --> 00:03:48,474
Notice that I changed our text color and
included a font-weight declaration

47
00:03:48,474 --> 00:03:53,620
to specify the light or
300 version of the Work Sans web font.

48
00:03:54,650 --> 00:04:00,949
And when we preview in the browser,
our body copy is in Work Sans Light.

49
00:04:03,072 --> 00:04:07,264
You might notice that we never wrote
a @font-face at-rule this time, but

50
00:04:07,264 --> 00:04:10,720
that doesn't mean we're not using one.

51
00:04:10,720 --> 00:04:16,110
I'm going to copy the link from Google
web fonts and paste into a browser.

52
00:04:17,560 --> 00:04:22,725
And when it loads, you can see that
Google Fonts has written the font

53
00:04:22,725 --> 00:04:27,360
face at rule for us and
provided Work Sans in the WOFF format.

54
00:04:28,630 --> 00:04:35,980
Great, now you have a handy free resource
for adding new web fonts to your webpage.

55
00:04:35,980 --> 00:04:39,560
Just remember to use
Google Fonts sparingly.

56
00:04:39,560 --> 00:04:44,552
It might be tempting to combine six or
seven typefaces in one web page,

57
00:04:44,552 --> 00:04:47,780
but doing so
would really slow loading time.

58
00:04:49,180 --> 00:04:54,162
Now that we've improved out typeface,
we'll use the remainder of this stage to

59
00:04:54,162 --> 00:04:57,560
work on the size and
the spacing of our text.

60
00:04:57,560 --> 00:04:58,550
That's coming up next.