Skip to content
Biome
Docs Blog Playground

useGenericFontNames (since v1.8.0)

Diagnostic Category: lint/nursery/useGenericFontNames

Sources:

Disallow a missing generic family keyword within font families.

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. The following special situations are ignored:

  • Property with a keyword value such as inherit, initial.
  • The last value being a CSS variable.
  • font-family property in an @font-face rule.

Examples

Section titled Examples

Invalid

Section titled Invalid
a { font-family: Arial; }
code-block.css:1:18 lint/nursery/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.
  

a { font: normal 14px/32px -apple-system, BlinkMacSystemFont; }
code-block.css:1:43 lint/nursery/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

Section titled Valid
a { font-family: "Lucida Grande", "Arial", sans-serif; }
a { font-family: inherit; }
a { font-family: sans-serif; }
a { font-family: var(--font); }
@font-face { font-family: Gentium; }
Section titled Related links