Skip to main content

font-family-no-missing-generic-family-keyword

Disallow a missing generic family keyword within font families.

a { font-family: Arial, sans-serif; }
/**                     ↑
 * An example of generic family name */

The generic font family can be:

  • placed anywhere in the font family list
  • omitted if a keyword related to property inheritance or a system font is used

This rule checks the font and font-family properties.

Options​

true​

The following patterns are considered problems:

a { font-family: Helvetica, Arial, Verdana, Tahoma; }
a { font: 1em/1.3 Times; }

The following patterns are not considered problems:

a { font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif; }
a { font: 1em/1.3 Times, serif, Apple Color Emoji; }
a { font: inherit; }
a { font: caption; }
a { font-family: var(--font-family-common); }
a { font-family: Helvetica, var(--font-family-common); }

Optional secondary options​

ignoreFontFamilies: ["/regex/", /regex/, "string"]​

Given:

["custom-font"]

The following pattern is not considered a problem:

a { font-family: custom-font; }

The following pattern is considered a problem:

a { font-family: invalid-custom-font; }