Font-family

Contact Us or call 1-877-932-8228
Font-family

Font-family

The font-family property is used in CSS to specify the font name to apply to an element. You can specify by font name or font category.

Specifying by Font Name

When you specify a font by font name, the browser will look for the named font on the end user's computer. If it finds it, the font will be displayed accordingly. For example, the following rule would make the font of all <p> tags Arial:

p { font-family: Arial; }

If the Arial font were not found on the end user's computer, the browser would display a default font. If you are concerned that the font name you want to use might not be found on a user's computer, you can provide a list of options.

p { font-family: Arial, Helvetica; }

In this case, the browser will first look for Arial. If it doesn't find Arial, it will then look for Helvetica.

Specifying Font by Category

When you specify a font by category, the browser will use the font the user's computer specifies for that category. For example, for monospace, the computer might specify Courier. The font family categories are listed below:

  • cursive
  • fantasy
  • monospace
  • sans-serif
  • serif

To be extra safe, designers often specify a couple specific options followed by a font family category, like so:

p { font-family: Arial, Helvetica, sans-serif; }

This way, if neither Arial nor Helvetica is found, the browser at least knows to use some sans-serif font.

The following code sample illustrates how font-family works:

Code Sample:

Fonts/Demos/FontFamily.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Font Family</title>
<style type="text/css">
	body {
		font-size: large;
	}
	div {
		margin: 10px;
		padding: 10px;
		border: 1px solid black;
	}
</style>
</head>
<body>
<div style="font-family: Arial, Helvetica, sans-serif;">
	Arial, Helvetica, sans-serif
</div>
<div style="font-family: 'Times New Roman', Times, serif;">
	'Times New Roman', Times, serif
</div>
<div style="font-family: 'Courier New', Courier, monospace;">
	font-family: 'Courier New', Courier, monospace
</div>
<div style="font-family: Verdana;">
	Verdana
</div>
<div style="font-family: Comic Sans MS;">
	Comic Sans MS
</div>
<div style="font-family: Wingdings;">
	Wingdings
</div>
</body>
</html>

The above code will render as follows:

The web-safe fonts are those fonts that are most commonly installed on computers and are therefore safe to use in your CSS. You can read the full list of safe web fonts on About.com: http://webdesign.about.com/od/fonts/qt/web-safe-fonts.htm.

Next