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.