useGenericFontNames
Summary
Section titled Summary- Rule available since:
v1.8.0 - Diagnostic Category:
lint/a11y/useGenericFontNames - This rule is recommended, which means is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
Description
Section titled DescriptionDisallow 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-familyproperty in an@font-facerule.
Examples
Section titled ExamplesInvalid
Section titled Invalida { 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.
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
Section titled Valida { 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; }How to configure
Section titled How to configure{ "linter": { "rules": { "a11y": { "useGenericFontNames": "error" } } }}