== Why is this an issue?

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.

== How to fix it

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. 

=== Code examples

==== Noncompliant code example

[source,css,diff-id=1,diff-type=noncompliant]
----
a { 
  font-family: Helvetica, Arial, Verdana, Tahoma; /* Noncompliant; there is no generic font family in the list */
}
----

==== Compliant solution

[source,css,diff-id=1,diff-type=compliant]
----
a { 
  font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
}
----


== Resources
=== Documentation
* CSS Specification - https://www.w3.org/TR/CSS2/fonts.html#generic-font-families[Generic font families]
* MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/font-family[``++font-family++``]
* MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/font[``++font++``]