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.
