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