XHTML Lesson 12: The Outdated Font Tag

Fontography is possible on the web to a limited extent using the Font tag. The Font tag is outdated today but it is still important to be aware of how it works so you will understand pages written by others. The correct way to style your pages today is with Cascading Style Sheets (CSS).

Assignment:

Type the code below into any text editor and save it with the name "lesson12.html" in your "mySite" folder. You may view the completed lesson in a new window by clicking here . After you create this page, open it in your Web browser.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Lesson 12: The Outdated Font Tag</title>
</head>
<body bgcolor="white">
<h1>The Outdated Font Tag</h1>
<p>Common Font types and their uses.</p>
<p><font face="verdana, arial, futura, sans-serif">Use proportional, sans-serif fonts like Verdana and Arial for headings.</font></p>
<p><font face="georgia, times new roman, serif">Use proportional, serif fonts like Georgia and Times New Roman for body text.</font></p>
<p><font face="Courier, Courier New, monospace">Use non-proportional, serif fonts like Courier when you want the look of a typewriter font.</font></p>
<p><font face="Monaco, FixedSys, monospace">Use non-proportional, sans serif fonts like Monaco and FixedSys when you want the look of computer code.</font></p>
</body>
</html>

A Detailed Explanation:

The face attribute of the font tag takes a value consisting of a string of font names. The Web browser looks for these fonts in the order you list them. For example, in the example below the Web browser will look for Verdana first. If that font is not available then it will look for arial and then futura. If none of them are available, the Web browser will use whatever default sans-serif font is available. To learn about fonts, see the multimedia basics section of this Web site.

<font face="verdana, arial, futura, sans-serif">

Previous Lesson | Next Lesson