HTML and CSS Reference
• Cursive —Characters have either joining strokes or other cursive characteristics, resulting in a handwritten
• Fantasy —Characters are primarily decorative but still contain representations of characters.
• Monospace —All characters have the same fixed width, similar to a manual typewriter and often used to set
samples of computer code.
Figure 10-1 The five generic fonts when viewed in Google Chrome.
This generic font demonstration page can be found in the project files ch10-00, named generic-fonts-demo.html.
Initial value: browser dependent | Inherited: Yes | Applies to: All | CSS2.1
Browser support: IE 3+, Firefox 1+, Chrome 1+, Opera 3.5+, Safari 1+
The font-family property enables you to specify a font or list of fonts to be applied to an element.
1. In styles.css, find the rule set for body and add the following:
The initial value for font-family is dependent on the browser, but for all desktop browsers, each has
chosen serif as its default. As a result, you don't yet see a difference to the page, but nonetheless you have
specified a fallback font for the entire page, which is always wise. Wise…but kind of boring, right? So you
can change this font declaration into a font stack.
2. Change the font-family declaration to the following:
font-family: Georgia, serif;
3. Save styles.css.
As shown in Figure 10-2, the Cool Shoes & Socks page is now entirely set in Georgia. When a browser comes to
render this declaration, it first tries to set the font as Georgia, but if the device doesn't have it, the browser then falls
back to serif. This is known as a font stack. A font stack can consist of a long list of fonts, starting with your most
desired, working down through fonts that are closer to being web safe, finally reaching one of the generic fonts that