Including Fonts

To specify a font, use the font-family: property. This is followed with a comma-delineated, list of fonts for the browser to try and load.

At a minimum, every browser will be able to render something when passed one of three default values;

• sans-serif
• serif
• monospace

.p1 {
    font-family: sans-serif;
}
.p2 {
    font-family: serif;
}
.p2 {
    font-family: monospace;
}

<p class="p1">sans-serif</p>
<p class="p2">serif</p>
<p class="p3">monospace</p>

Instead of using generic font class names, developers may also use specific font family names. When a specific font family is listed, the browser will try to load the font from the client computers font library.

For example, the following will cause the browser to first try and load “Comic Sans MS”. If the client computer (yours in this case) does not have a font matching that name, it will then try “Comic Sans”, then “Garamond”, then “Times”, then finally the default ‘serif’ font. The browser will do this by asking the client for the font. If the client doesn’t have the font, then the browser will try the next listed font.

#heading-1 {
    font-family: 'Comic Sans MS', 'Comic Sans', Garamond, Times, serif;
}

<h1 id="heading-1">Displayed Font</h1>

Web-Safe Fonts

Fonts that developers can count on being available by the system are known as “web-safe” fonts. These include font families that both Windows and Mac should have.

A list of these fonts is available from:

• Web Safe Fonts

The advantage of using fonts from this list is that the client computer will already have the font. This reduced load times and may increase performance.