CSS font family

You've seen how to change the color and
background color of text on the page.

But there's so much more that you can do
with text and CSS.

To start off, let's change the font.

What's a font? You probably already know
what one is, but you may

not know the word for it.

It's the style of the letters that make up the words.

It is whether the letters have flourishes
on them, or how thick they are,

or if they look like they're written
with an ink pen.

It'll be easier if I go ahead and
change the font on this webpage.

I'll go to the CSS rule that selects
all the paragraphs,

and add a `font-family` property here.

Do you see how the letters changed
[once we did that]?

They look a little bit simpler now.

Now, let me change the `font-family`
back by specifying `serif` instead.

Do you notice that the letters
look a little more complex?

A 'serif' font is any font that has what
looks like little 'feet' on the letters.

When we tell the browser to use a 'serif'
`font-family`, it will use the default

serif font for the computer. Which is
usually the 'Times New Roman' font.

I'm going to change it back again, to `sans-serif` [now].

The 'sans' comes from Latin and means
'without.'

So a sans-serif font is one that doesn't
have the little 'feet' on the letters.

That is why the letters look simpler.

When we tell the browser to use a
sans-serif `font-family', it uses

the default sans-serif for that computer,
which is usually 'Arial' or 'Helvetica'.

But, here is an important point: It'll
pick the default font of whatever

computer the viewer is on, not the author.

So we may very well be seeing two
different sans-serif fonts right now,

if your computer has a different default than mine.

Sometimes, that's okay, but other times
I want the viewer of the webpage to see

it in exactly the same fonts as me.

In that case, I can specify the precise
font name. For example, Helvetica.

This will work, as long as both you and
me have Helvetica on our computers.

But not all computers have all the same
fonts, and in that case the computer will

ignore the property entirely.

Luckily, CSS lets us specify a 'fallback'
font-family, for backup, in case

a particular font doesn't exist on a
computer.

You just add a comma after 'Helvetica',
and then bring back `sans-serif` there.

Now, the computer will look for Helvetica,
and if it can't find it, just use its

default `sans-serif` font.

Generally, whenever you specify a specific
font name, like Helvetica, you should

always specify a backup family name as
well.

Besides 'serif' and 'sans-serif' there are
a couple other generic font-family

names we can use.

If we wanted our lyrics to look handwritten,
we could specify `font-family: cursive`.

If we wanted the lyrics to be fancier, we
could try the `fantasy` font family.

Or, what if we wanted them to look like
they were written on a type writer?

We could specify the `monospace` font family.

The `monospace` font is fixed width,
meaning that all of the letters take up

the exact same width.

And, in fact, you've seen a lot of monospace
fonts here on Khanacademy,

because we always use monospace fonts
for code editors.

That's because we want all of our code to
line up, regardless of the letters in

the words.

Now that you know how to change the
font family, use your power wisely.

If you want your page to look good, limit
yourself to a few different families,

and come up with pairs of fonts that look
good together.