Skip to content

New Rule: no-duplicate-font-family-names #496

Description

@przemyslaw-zan

Rule details

Disallow duplicate names within font families.

What type of rule is this?

Warns about a potential problem

Example code

a {
    /* Duplicate family name */
    font-family: Arial, Arial, sans-serif;

    /* Quoted and unquoted names refer to the same family */
    font-family: "Arial", Arial, sans-serif;

    /* Also checked in the `font` shorthand */
    font: 16px Verdana, Verdana, sans-serif;
}

Prior Art

Participation

  • I am willing to submit a pull request to implement this rule.

AI acknowledgment

  • I did not use AI to generate this issue report.
  • (If the above is not checked) I have reviewed the AI-generated content before submitting.

Additional comments

  • Comparison would be case-insensitive and quote-insensitive, since family names are matched that way per spec ("Arial" is equivalent to arial).
  • font-family: monospace, monospace is a known intentional browser hack (Please explain monospace, monospace one more time :) necolas/normalize.css#519 (comment)), so an allowFontFamilies array option should be included as an escape hatch. Stylelint covers the same need with ignoreFontFamilies.
  • The stylelint rule warns that it stumbles on unquoted multi-word font names and names containing escape sequences. This implementation can avoid that limitation: within each comma-separated segment, all consecutive identifiers form a single family name per the grammar (joined with single spaces), and escape sequences can be normalized before comparison, so Times New Roman and "Times New Roman" compare as equal.
  • Complements the existing font-family-fallbacks rule. Its helpers (generic font list, CSS-wide keyword checks, font/font-family handling) are currently private to that rule's module - if extracting them to the shared util.js is acceptable, both rules could reuse them.

Metadata

Metadata

Labels

Type

No type

Fields

No fields configured for issues without a type.

Projects

Status
Feedback Needed

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions