0:00:00.211,0:00:05.221
You've seen how to change the color and[br]background color of text on the page.

0:00:05.303,0:00:08.682
But there's so much more that you can do[br]with text and CSS.

0:00:09.509,0:00:11.632
To start off, let's change the font.

0:00:12.577,0:00:15.925
What's a font? You probably already know[br]what one is, but you may

0:00:15.925,0:00:17.034
not know the word for it.

0:00:17.243,0:00:19.507
It's the style of the letters that make up the words.

0:00:19.802,0:00:22.996
It is whether the letters have flourishes[br]on them, or how thick they are,[br]

0:00:23.176,0:00:25.083
or if they look like they're written[br]with an ink pen.

0:00:25.884,0:00:30.266
It'll be easier if I go ahead and [br]change the font on this webpage.

0:00:30.663,0:00:35.441
I'll go to the  CSS rule that selects[br]all the paragraphs,

0:00:35.729,0:00:37.957
and add a `font-family` property here.

0:00:41.739,0:00:43.829
Do you see how the letters changed[br][once we did that]?

0:00:44.115,0:00:45.805
They look a little bit simpler now.

0:00:47.293,0:00:52.183
Now, let me change the `font-family` [br]back by specifying `serif` instead.

0:00:52.283,0:00:55.902
Do you notice that the letters[br]look a little more complex?

0:00:55.902,0:00:59.859
A 'serif' font is any font that has what[br]looks like little 'feet' on the letters.

0:00:59.979,0:01:04.269
When we tell the browser to use a 'serif'[br]`font-family`, it will use the default

0:01:04.269,0:01:07.712
serif font for the computer. Which is[br]usually the 'Times New Roman' font.

0:01:10.554,0:01:13.114
I'm going to change it back again, to `sans-serif` [now].

0:01:14.246,0:01:17.806
The 'sans' comes from Latin and means[br]'without.'

0:01:17.996,0:01:21.810
So a sans-serif font is one that doesn't[br]have the little 'feet' on the letters.

0:01:22.101,0:01:23.722
That is why the letters look simpler.

0:01:24.177,0:01:27.936
When we tell the browser to use a [br]sans-serif `font-family', it uses

0:01:27.936,0:01:33.136
the default sans-serif for that computer,[br]which is usually 'Arial' or 'Helvetica'.

0:01:33.136,0:01:37.710
But, here is an important point: It'll [br]pick the default font of whatever

0:01:37.710,0:01:41.216
computer the viewer is on, not the author.

0:01:41.553,0:01:45.257
So we may very well be seeing two[br]different sans-serif fonts right now,

0:01:45.317,0:01:47.595
if your computer has a different default than mine.

0:01:47.595,0:01:54.330
Sometimes, that's okay, but other times[br]I want the viewer of the webpage to see

0:01:54.330,0:01:56.263
it in exactly the same fonts as me.

0:01:56.701,0:02:01.981
In that case, I can specify the precise[br]font name. For example, Helvetica.

0:02:03.150,0:02:07.938
This will work, as long as both you and[br]me have Helvetica on our computers.

0:02:08.436,0:02:12.641
But not all computers have all the same[br]fonts, and in that case the computer will

0:02:12.708,0:02:14.039
ignore the property entirely.

0:02:14.746,0:02:20.029
Luckily, CSS lets us specify a 'fallback'[br]font-family, for backup, in case

0:02:20.058,0:02:22.303
a particular font doesn't exist on a[br]computer.

0:02:22.979,0:02:28.001
You just add a comma after 'Helvetica',[br]and then bring back `sans-serif` there.

0:02:28.443,0:02:32.737
Now, the computer will look for Helvetica,[br]and if it can't find it, just use its

0:02:32.737,0:02:34.438
default `sans-serif` font.

0:02:35.070,0:02:39.300
Generally, whenever you specify a specific[br]font name, like Helvetica, you should

0:02:39.324,0:02:42.745
always specify a backup family name as[br]well.

0:02:44.447,0:02:48.349
Besides 'serif' and 'sans-serif' there are[br]a couple other generic font-family

0:02:48.349,0:02:49.497
names we can use.

0:02:50.100,0:02:56.604
If we wanted our lyrics to look handwritten,[br]we could specify `font-family: cursive`.

0:02:58.274,0:03:03.874
If we wanted the lyrics to be fancier, we [br]could try the `fantasy` font family.

0:03:04.944,0:03:08.305
Or, what if we wanted them to look like[br]they were written on a type writer?

0:03:08.305,0:03:11.124
We could specify the `monospace` font family.

0:03:11.204,0:03:15.184
The `monospace` font is fixed width,[br]meaning that all of the letters take up

0:03:15.196,0:03:16.306
the exact same width.

0:03:16.477,0:03:20.051
And, in fact, you've seen a lot of monospace[br]fonts here on Khanacademy,

0:03:20.258,0:03:23.328
because we always use monospace fonts[br]for code editors.

0:03:23.996,0:03:27.077
That's because we want all of our code to[br]line up, regardless of the letters in

0:03:27.216,0:03:27.781
the words.

0:03:29.480,0:03:33.310
Now that you know how to change the [br]font family, use your power wisely.

0:03:33.450,0:03:37.790
If you want your page to look good, limit[br]yourself to a few different families,

0:03:37.790,0:03:40.230
and come up with pairs of fonts that look[br]good together.