The font-family (and the shorthand font) CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
If none of the font names defined in a font or font-family declaration are available on the browser of the user, the browser will display the text using its default font. It’s recommended to always define a generic font family for each declaration of font or font-family to get a less degraded situation than relying on the default browser font. This lets the browser select an acceptable fallback font when necessary.
The list of generic font families is as follows:
serif: Glyphs have finishing strokes, flared or tapering ends, or actual serifed endings.sans-serif: Glyphs have plain stroke endings.cursive: Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces.fantasy: Fantasy fonts are primarily decorative fonts that contain playful representations of characters.monospace: All glyphs have the same fixed width.system-ui: Glyphs are taken from the default user interface font on a given platform.ui-serif: The default user interface serif font.ui-sans-serif: The default user interface sans-serif font.ui-monospace: The default user interface monospace font.ui-rounded: The default user interface font that has rounded features.You should always include at least one generic family name in a font-family list, since there’s no guarantee that any given font is available.
a {
font-family: Helvetica, Arial, Verdana, Tahoma; /* Noncompliant; there is no generic font family in the list */
}
a {
font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
}
font-familyfont