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 */

Use this rule to avoid font stacks with nothing to fall back to. Browsers use the generic family when none of the named fonts is available.

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.

This rule doesn't have any message arguments.

Options​

true​

{
  "font-family-no-missing-generic-family-keyword": 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​

{ "ignoreFontFamilies": ["array", "of", "font-families", "/regex/"] }

Given:

{
  "font-family-no-missing-generic-family-keyword": [
    true,
    {
      "ignoreFontFamilies": ["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; }