A Font Test Page

You will be able to use this page to test whether a browser supports a font or not.

1. Create a new XHTML document, with the skeleton you are used to creating by now: Font test

2. Add a element to an external style sheet. The name of the style sheet will be font- test.css . Font text

3. Add four

elements to the body of the document, each containing the line “The quick brown fox jumped over the lazy dog." For each element, give it a class attribute whose value is the name of a different typeface, and start each sentence with the name of the typeface, too, like this:

Arial: The quick brown fox jumped over the lazy dog.

Helvetica: The quick brown fox jumped over the lazy dog.

Times New Roman: The quick brown fox jumped over the lazy dog.

Mrs Eaves: The quick brown fox jumped over the lazy dog.

4. Save this file as font-test.html .

*Adapted from Beginning Web Programming with HTML, XHTML and CSS 5. Create a new document in the editor you are using and save the file as font-test.css .

6. Add the selectors for each of the

elements you added to your XHTML document:

div.arial div.helvetica div.TimesNewRoman div.MrsEaves

7. Add font-family properties to each of these, and give the value of the typeface specified:

div.arial {font-family:arial;} div.helvetica {font-family:Helvetica;} div.TimesNewRoman {font-family:"Times New Roman";} div.MrsEaves {font-family:"Mrs Eaves";}

8. Add another typeface after the one you want to view, and separate the two with a comma.

div.arial {font-family:arial, courier;} div.helvetica {font-family:Helvetica, courier;} div.TimesNewRoman {font-family:"Times New Roman", courier;} div.MrsEaves {font-family:"Mrs Eaves", courier;}

9. Add the following rule to make sure that there is adequate space between each line to look at the fonts: div {line-height:28px;}

10. Save this CSS file and open the XHTML page in your browser. You should end up with something like the next figure:

*Adapted from Beginning Web Programming with HTML, XHTML and CSS