Home » The tutorial » Changing Fonts

Changing Fonts 

If you didn't actually try the CSS code from the cascade lesson above, you may have missed something.  By adding font-family: Arial; to the html declaration, all of the fonts changed to Arial.  

But, Bob doesn't want that. He wants the font to match his logo.  So, we're going to go with Georgia.  Fortunately, Georgia is a font that was designed for web sites and many users already have it.

Add this to the top of the CSS file.

html
{
font-family:    Georgia, Times New Roman, serif;
}

Notice that we actually define 3 different fonts.  The browser will try these three in order in case one of them isn't there.  So, if your visitor doesn't have Georgia installed they will get Times New Roman instead, which is pretty close.  The serif declaration at the end gives us a last ditch try if neither is there.  It will go with the default serif font.  You should always end a font-family declaration with either serif or sans-serif just in case.  You can use more than 3, but 3 seemed a good number.

You can see Bob's page here with the new fonts.  If you don't have Georgia installed it will look the same to you.

A Warning
Just because you have a font doesn't mean that your visitors will.  Your best bet is to stay with the 'web safe' fonts - Georgia, Times New Roman, Arial, Helvetica, Tahoma, Verdana; and of course serif and sans-serif.