Chapter 24: CSS and Fonts

When we choose a font, we actually have to specify whether it is a font that is pointy (like Times New Roman, it has lots of little stylish points all over the letters), or whether it is a font that is not pointy (like Arial, Arial is a very smooth looking font). For some bizarre reason, when CSS was invented they decided that they had to be very posh. As much fun as it would be to specify in the CSS that the font is "pointy" or "non-pointy", we have to use slightly more technical terms. For pointy, we have to use the word "serif", and for non-pointy, we have to use "sans-serif".

The format for setting the font property is:

font-family: font-style, generic family;

So, if we wanted to set the font of a paragraph to Times New Roman:

<p style="font-family: 'times new roman', serif">We've set the font here to Times New Roman!</p>

Output

We've set the font here to Times New Roman!

Notice above in the example code that the words Times New Roman are together enclosed within single quotes? This must always be done if a particular font style has spaces in it's name.

To set the font of the paragraph to Arial:

<p style="font-family: arial, sans-serif">We've set the font here to Arial!</p>

Output

We've set the font here to Arial!

If we wanted all of our paragraph to look a little more funky, we could use the Comic Sans MS font. The Comic Sans MS font is a sans-serif font, which you may gather from the sans part of the name! If we wanted to set all of hour paragraphs to take on this font, we do it like so:

<p style="font-family: 'comic sans ms', sans-serif">We've set the font to Comic Sans MS!</p>

Output

We've set the font to Comic Sans MS!

Give it a whizz, and take the quiz!