1
00:00:00,211 --> 00:00:05,221
You've seen how to change the color and
background color of text on the page.

2
00:00:05,303 --> 00:00:08,682
But there's so much more that you can do
with text and CSS.

3
00:00:09,509 --> 00:00:11,632
To start off, let's change the font.

4
00:00:12,577 --> 00:00:15,925
What's a font? You probably already know
what one is, but you may

5
00:00:15,925 --> 00:00:17,034
not know the word for it.

6
00:00:17,243 --> 00:00:19,507
It's the style of the letters that make up the words.

7
00:00:19,802 --> 00:00:22,996
It is whether the letters have flourishes
on them, or how thick they are,


8
00:00:23,176 --> 00:00:25,083
or if they look like they're written
with an ink pen.

9
00:00:25,884 --> 00:00:30,266
It'll be easier if I go ahead and 
change the font on this webpage.

10
00:00:30,663 --> 00:00:35,441
I'll go to the  CSS rule that selects
all the paragraphs,

11
00:00:35,729 --> 00:00:37,957
and add a `font-family` property here.

12
00:00:41,739 --> 00:00:43,829
Do you see how the letters changed
[once we did that]?

13
00:00:44,115 --> 00:00:45,805
They look a little bit simpler now.

14
00:00:47,293 --> 00:00:52,183
Now, let me change the `font-family` 
back by specifying `serif` instead.

15
00:00:52,283 --> 00:00:55,902
Do you notice that the letters
look a little more complex?

16
00:00:55,902 --> 00:00:59,859
A 'serif' font is any font that has what
looks like little 'feet' on the letters.

17
00:00:59,979 --> 00:01:04,269
When we tell the browser to use a 'serif'
`font-family`, it will use the default

18
00:01:04,269 --> 00:01:07,712
serif font for the computer. Which is
usually the 'Times New Roman' font.

19
00:01:10,554 --> 00:01:13,114
I'm going to change it back again, to `sans-serif` [now].

20
00:01:14,246 --> 00:01:17,806
The 'sans' comes from Latin and means
'without.'

21
00:01:17,996 --> 00:01:21,810
So a sans-serif font is one that doesn't
have the little 'feet' on the letters.

22
00:01:22,101 --> 00:01:23,722
That is why the letters look simpler.

23
00:01:24,177 --> 00:01:27,936
When we tell the browser to use a 
sans-serif `font-family', it uses

24
00:01:27,936 --> 00:01:33,136
the default sans-serif for that computer,
which is usually 'Arial' or 'Helvetica'.

25
00:01:33,136 --> 00:01:37,710
But, here is an important point: It'll 
pick the default font of whatever

26
00:01:37,710 --> 00:01:41,216
computer the viewer is on, not the author.

27
00:01:41,553 --> 00:01:45,257
So we may very well be seeing two
different sans-serif fonts right now,

28
00:01:45,317 --> 00:01:47,595
if your computer has a different default than mine.

29
00:01:47,595 --> 00:01:54,330
Sometimes, that's okay, but other times
I want the viewer of the webpage to see

30
00:01:54,330 --> 00:01:56,263
it in exactly the same fonts as me.

31
00:01:56,701 --> 00:02:01,981
In that case, I can specify the precise
font name. For example, Helvetica.

32
00:02:03,150 --> 00:02:07,938
This will work, as long as both you and
me have Helvetica on our computers.

33
00:02:08,436 --> 00:02:12,641
But not all computers have all the same
fonts, and in that case the computer will

34
00:02:12,708 --> 00:02:14,039
ignore the property entirely.

35
00:02:14,746 --> 00:02:20,029
Luckily, CSS lets us specify a 'fallback'
font-family, for backup, in case

36
00:02:20,058 --> 00:02:22,303
a particular font doesn't exist on a
computer.

37
00:02:22,979 --> 00:02:28,001
You just add a comma after 'Helvetica',
and then bring back `sans-serif` there.

38
00:02:28,443 --> 00:02:32,737
Now, the computer will look for Helvetica,
and if it can't find it, just use its

39
00:02:32,737 --> 00:02:34,438
default `sans-serif` font.

40
00:02:35,070 --> 00:02:39,300
Generally, whenever you specify a specific
font name, like Helvetica, you should

41
00:02:39,324 --> 00:02:42,745
always specify a backup family name as
well.

42
00:02:44,447 --> 00:02:48,349
Besides 'serif' and 'sans-serif' there are
a couple other generic font-family

43
00:02:48,349 --> 00:02:49,497
names we can use.

44
00:02:50,100 --> 00:02:56,604
If we wanted our lyrics to look handwritten,
we could specify `font-family: cursive`.

45
00:02:58,274 --> 00:03:03,874
If we wanted the lyrics to be fancier, we 
could try the `fantasy` font family.

46
00:03:04,944 --> 00:03:08,305
Or, what if we wanted them to look like
they were written on a type writer?

47
00:03:08,305 --> 00:03:11,124
We could specify the `monospace` font family.

48
00:03:11,204 --> 00:03:15,184
The `monospace` font is fixed width,
meaning that all of the letters take up

49
00:03:15,196 --> 00:03:16,306
the exact same width.

50
00:03:16,477 --> 00:03:20,051
And, in fact, you've seen a lot of monospace
fonts here on Khanacademy,

51
00:03:20,258 --> 00:03:23,328
because we always use monospace fonts
for code editors.

52
00:03:23,996 --> 00:03:27,077
That's because we want all of our code to
line up, regardless of the letters in

53
00:03:27,216 --> 00:03:27,781
the words.

54
00:03:29,480 --> 00:03:33,310
Now that you know how to change the 
font family, use your power wisely.

55
00:03:33,450 --> 00:03:37,790
If you want your page to look good, limit
yourself to a few different families,

56
00:03:37,790 --> 00:03:40,230
and come up with pairs of fonts that look
good together.