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-family font