How do I use the font-family property?
Author: Deron Eriksson
Description: This CSS tutorial describes how to use the font-family property.
Tutorial created using: Windows XP


Page: < 1 2

(Continued from page 1)

The style-test.html page below gives several examples of the use of the font-family property.

style-test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Style Test</title>
<style type="text/css">
.one { font-family: serif; }
.two { font-family: sans-serif; }
.three { font-family: monospace; }
.four { font-family: "Times New Roman", serif; }
.five { font-family: Verdana, sans-serif; }
.six { font-family: Courier, monospace; }
.seven { font-family: "Times New Roman", Courier, serif; }
.eight { font-family: Courier, "Times New Roman", monospace; }
</style>
</head>
<body>
<div class="one">font-family: serif;</div>
<div class="two">font-family: sans-serif;</div>
<div class="three">font-family: monospace;</div>
<div class="four">font-family: "Times New Roman", serif;</div>
<div class="five">font-family: Verdana, sans-serif;</div>
<div class="six">font-family: Courier, monospace;</div>
<div class="seven">font-family: "Times New Roman", Courier, serif;</div>
<div class="eight">font-family: Courier, "Times New Roman", monospace;</div>
</body>
</html>

The display of style-test.html is shown below in IE7.

font-family example
Page: < 1 2