Fonts are a very important and convoluted part of styling a web site.

The syntax for specifying a font in your stylesheet

The default font is set by the browser. The individual user may have changed the default font for their own browser, so don't assume that the default font that you see on your computer will be the visitors default font. It is best practice to always state a font-family for your web pages. Use one or two backup fonts that display in a similar manner in the case that the browser can not find or use your preferred font. You can specify this for the <body> tag and it will carry through to all fonts on your page unless specified otherwise. Here is an example:

body {font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; }

Font file types: .eto, .ttf, .otf, .svg and .woff

Computers and mobile devices come loaded with a set of fonts in files of the form of .eot, .ttf, .otf, .svg, .woff . The browser will pull that font file from your computer or mobile device for display on the web page. These files have the font characters in a series of set heights.

.ttf will work on most browsers except Internet Explorer and the iPhone
.eot works for Internet Explorer only
.woff is a compressed emerging standard
.svg is used by iPhones and iPads

The font-family is an inherited attribute

The font-family attribute is inherited. This means that if a font family is stated for the <body> tag, that font will be used throughout the entire document unless other elements have specific font-family attributes called out. A font-family specified for a containing div will be inherited by all of the element in that div, unless some other specific style overrides it. Siblings do not inherit the font-family attribute. Say you have an <h2> specifically styled to be Impact, the following <p> tag will not inherit that font-family attribute.

The font-size attribute and browsers

If you specify a height using the font-size attribute for your font that is not one of these set heights, the browser will interpret that new height for the display. This can result in blocky or chopped up looking fonts in some cases, so be careful that you preview your site with several different browsers and devices.

Not all fonts render the same on every browser and some mobile devices may not have the font that you specify at all. You can use custom fonts, but you must have a way to have the custom font loaded. You must also have the right to specify custom fonts. Some are freely available, some require a licence.

Font families and languages

Keep in mind that not all fonts have characters for the multitude of languages displayed on the Internet. When choosing a custom font for headings, be sure that the font has the ability to display necessary characters. If you do not check this, the visitor's browser my display other inapproprate characters and make it difficult to read.

Font families and headings vs paragraph text

You may want to make a statement with some snazzy font for the headings, or may just for special headings. It is best practice to keep the readable copy, the main content, in a simple easy-to-read font. Pick a font for your <p>, <td>, <li> tags that is clear and well spaced for the visitor.

Headings using a font vs using graphic files for your headings

Before the CSS3 feature of @font-face where you could load your own custom font, many web designers would use a graphic file for their headings. You do have more control over the look and flair for your headings if you use graphic files, but beware of a few issues. The graphic file is not readable by the Google crawlers, so you loose the important SEO of heading tags. You can specify an alt="" attribute, but this does not carry the same importance of a heading tag such as <h1>, <h2>, <h3>, etc. These graphic files can also get lost, which will cause confusion for the visitor when the headings are lost. Some web developers will add real text, but shove it way to the left or right. This can be seen as a deceptive practice by the search engines and can cause styling nightmares. The graphic files can also be difficut to change, as you need to find the original Photoshop or Illustrator file, change it and re-upload it. If it is real text, it can be changed in an instant.

Refer to the CSS Basics chart for Common Fonts used across the web to see the generally accepted font faces.