Fonts are often unavailable on the computer of the person reading your web page. For this reason, CSS allows you to specify multiple fonts, and to specify generic font types. The first font that matches an available font is used by the browser.
You have five generic font families: serif, sans-serif, cursive, monospace, and fantasy. You can specify multiple font names, and should usually specify a generic family as the last choice. You don’t know what fonts your visitor’s browser has. The generic font family tells the browser what kind of font to use if the specific fonts are unavailable.
In the above example, we specified the generic font family cursive, and let the browser choose which cursive font to use.
Add font-weight and font-family to your h1, h2 style definition:
h1, h2 {
border-top-style: inset;
border-bottom-style: inset;
border-width: .15em;
border-color: orange;
color: brown;
font-family: VTypewriter RoyalDeLuxe, American Typewriter, Courier, sans-serif;
font-weight: normal;
}
If the browser has VTypewriter RoyalDeluxe, that’s what it will use to display level 1 and 2 headlines. Otherwise, it will look for American Typewriter, and if that isn’t available it will look for Courier. Finally, if none of those are available, it will use its standard sans-serif font.
We also set the font-weight to normal. By default, most browsers will set headlines to bold, but if they don’t have the font they need in a bold version, they’ll skip to the next font in the list.
Related Pages
