useGenericFontNames (CSS)

Language CSS

Summary

Rule available since: v1.8.0
Diagnostic Category: lint/a11y/useGenericFontNames
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as font-family-no-missing-generic-family-keyword
- Inspired from css/font-family-fallbacks

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useGenericFontNames": "error"
6
      }
7
    }
8
  }
9
}

Description

Require a generic fallback in font-family lists.

Generic families such as serif, sans-serif, and monospace let the browser choose an available fallback when named fonts cannot be loaded. This rule checks the font and font-family properties.

A generic family may appear anywhere in the list. It is not required when:

the property uses a CSS-wide keyword such as inherit or initial;
the font shorthand uses a system-font value such as caption or menu;
the final family comes from a custom property through var();
font-family appears inside an @font-face rule.

Examples

Invalid

1
a { font-family: Arial; }

code-block.css:1:18 lint/a11y/useGenericFontNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Generic font family missing.
  
  > 1 │ a { font-family: Arial; }
      │                  ^^^^^
    2 │ 
  
  ℹ Consider adding a generic font family as a fallback.
  
  ℹ For examples and more information, see the MDN Web Docs
  
  - serif
  - sans-serif
  - monospace
  - etc.

1
a { font: normal 14px/32px -apple-system, BlinkMacSystemFont; }

code-block.css:1:43 lint/a11y/useGenericFontNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Generic font family missing.
  
  > 1 │ a { font: normal 14px/32px -apple-system, BlinkMacSystemFont; }
      │                                           ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Consider adding a generic font family as a fallback.
  
  ℹ For examples and more information, see the MDN Web Docs
  
  - serif
  - sans-serif
  - monospace
  - etc.

Valid

1
a { font-family: "Lucida Grande", "Arial", sans-serif; }

1
a { font-family: inherit; }

1
a { font-family: sans-serif; }

1
a { font-family: var(--font); }

1
@font-face { font-family: Gentium; }