noDuplicateFontNames (CSS)

Language CSS

Summary

Rule available since: v1.8.0
Diagnostic Category: lint/suspicious/noDuplicateFontNames
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-duplicate-names

How to configure

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

Description

Disallow duplicate names in font-family lists.

The rule checks the font and font-family properties. It skips values supplied through var() because their contents are not known during analysis.

The unquoted pair font-family: monospace, monospace is allowed. This pattern preserves an inherited font size instead of using the browser’s preferred monospace size. See MDN’s explanation.

Examples

Invalid

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

code-block.css:1:56 lint/suspicious/noDuplicateFontNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Duplicate font names are redundant and unnecessary: sans-serif
  
  > 1 │ a { font-family: "Lucida Grande", 'Arial', sans-serif, sans-serif; }
      │                                                        ^^^^^^^^^^
    2 │ 
  
  ℹ This is where the duplicate font name is found:
  
  > 1 │ a { font-family: "Lucida Grande", 'Arial', sans-serif, sans-serif; }
      │                                            ^^^^^^^^^^
    2 │ 
  
  ℹ Remove duplicate font names within the property.

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

code-block.css:1:44 lint/suspicious/noDuplicateFontNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Duplicate font names are redundant and unnecessary: Arial
  
  > 1 │ a { font-family: 'Arial', "Lucida Grande", Arial, sans-serif; }
      │                                            ^^^^^
    2 │ 
  
  ℹ This is where the duplicate font name is found:
  
  > 1 │ a { font-family: 'Arial', "Lucida Grande", Arial, sans-serif; }
      │                  ^^^^^^^
    2 │ 
  
  ℹ Remove duplicate font names within the property.

1
a { FONT: italic 300 16px/30px Arial, " Arial", serif; }

code-block.css:1:39 lint/suspicious/noDuplicateFontNames ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Duplicate font names are redundant and unnecessary: " Arial"
  
  > 1 │ a { FONT: italic 300 16px/30px Arial, " Arial", serif; }
      │                                       ^^^^^^^^
    2 │ 
  
  ℹ This is where the duplicate font name is found:
  
  > 1 │ a { FONT: italic 300 16px/30px Arial, " Arial", serif; }
      │                                ^^^^^
    2 │ 
  
  ℹ Remove duplicate font names within the property.

Valid

1
a { font-family: "Lucida Grande", "Arial", sans-serif; }
2
b { font: normal 14px/32px -apple-system, BlinkMacSystemFont, sans-serif; }
3
c { font-family: SF Mono, Liberation Mono, sans-serif; }
4
d { font: 1em SF Mono, Liberation Mono, sans-serif; }
5
e { font-family: monospace, monospace; }