Font family

In beginner.css find the body rule set.  Add a new blank line after the existing attribute (background-color) and on this line put:


Save both files and view text.html in a  browser.  On a MS Windows and Mac OS X systems you should see a definite change.  On others you may not.  This is because not all computers have the named font.  Try Raanana, Andalus and Roboto and at least one should not work.  You may need to watch carefully to see which ones work as if the listed font is not available the browser will just use a default font.

Note also that when there is a space in the name you need to put quotes around it.  Try this one instead of Wingdings and view the page:

body {
    font-family:"Courier New";        

Try a few fonts.  To see what fonts you have on your computer open a word processor and look for the font change tool.

Catering for multiple operating systems

To be as sure as you can be that you have chosen a font which will work you list a number of similar fonts which would look good on the site.  Replace Courier New with this list:

font-family:Verdana, Helvetica, sans-serif;

The browser will try each in turn until it finds one it has.  The last entry in this list is a type of font not an actual font.  This tells the browser that if it cannot find the other fonts it should use any sans serif font.  This is known as a generic font family and must be one of these: