Goal
- Enable your content to display correctly,
- even when the planned fonts don’t exist on a user’s system.
Implementation
In each CSS stylesheet, indicate the appropriate generic font family in the font-family
or font
properties:
- For serif fonts (such as Times Roman), specify the generic serif font family last. In the following example, the term "serif" has been correctly added as the last item in the list of fonts:
font-family: Georgia, "Bookman OldStyle", serif
. - For sans serif fonts (such as Arial), specify the generic sans-serif font family last. For example:
font-family: Optima, "Trebuchet MS", sans-serif
; - For monospace fonts (such as Courier), specify the monospace generic font family last. For example,
font-family: Courier, monospace
; - Likewise, use the generic cursive and fantasy families for the handwritten and fantasy fonts.
Find out more:
Control
In all CSS style sheets (for all media: screen, print, etc.):
- Check using a browser development tool that each
font
orfont-family property
contains one of the terms relating to generic font families:serif
,sans-serif,
monospace,
cursive
orfantasy
; - Check that these terms are located at the end of the listing for each
font
orfont-family
property; - Ensure the relevance of the generic family indicated:
serif
for serif fonts,sans-serif
for sans serif fonts,monospace
,cursive
orfantasy
in special cases.
This can also be checked by validating the HTML page using the W3C CSS validator (http://jigsaw.w3.org/css-validator/) which then warns if there are no generic font families.