New Rule: `require-fallback-fonts`

[Tanujkanti4441]

Rule details

Rule will enforce the use of fallback font to maintain consistency and readability across different devices and browsers.

What type of rule is this?

Warns about a potential problem

Example code

body {
  font-family: "Open Sans";
}

Participation

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

Additional comments

No response

[nzakas]

Thanks for the suggestion. How do you envision this working with variables?

[Tanujkanti4441]

Actually, I have kept it very basic for now. Do you think we should make it work with variables also?

[jeddy3]

Prior art for this one is Stylelint's font-family-no-missing-generic-family-keyword rule.

It looks like a few things have changed with <generic-family> since we added the rule to Stylelint with the addition of three sub-types: <generic-script-specific>, <generic-complete> and <generic-incomplete>.

Judging by this example:

body { font-family: "Adobe Fangsong Std R", generic(fangsong), serif }

and this description:

Authors are encouraged to append a generic font family as a last alternative for improved robustness, and to use a more specific generic font family, if applicable, to prefer a specific style even if the individual named font family is not available.

the spec is still encouraging authors to use a <generic-complete> keyword as the last family, e.g. serif, math and so on, as <generic-script-specific> and <generic-incomplete> may not match a local font. So, requiring a <generic-complete> keyword to come last seems like a good place to start with this rule.

[nzakas]

@Tanujkanti4441 I think variable support is important because this is how people reuse the same fonts. Look at how our own website uses them: https://github.com/eslint/eslint.org/blob/8aa775d70182619e2c663af25568b64c85df31a1/src/assets/scss/tokens/typography.scss#L82-L88

Thanks for the insights @JEDDY! I think we should try to find a way to create a single rule that deals with font-family fallback chains rather than splitting the concept of this rule from #155.

[nzakas]

@Tanujkanti4441 what do you think of my suggestion?

Maybe the rule is called font-family-fallbacks and requires not only fallbacks are present but that a generic fallback is last?

[Tanujkanti4441]

@Tanujkanti4441 what do you think of my suggestion?

Maybe the rule is called font-family-fallbacks and requires not only fallbacks are present but that a generic fallback is last?

Sounds good to me. Should we also limit the number of required fallback fonts, like one must use at least, lets say, 3 fallback fonts?

[nzakas]

Sounds good to me. Should we also limit the number of required fallback fonts, like one must use at least, lets say, 3 fallback fonts?

I don't think so. That number will always be arbitrary. As long as the last font family is generic then it doesn't matter. In fact, font-family: serif should be valid because it contains a generic family name.

[Tanujkanti4441]

Let me summarize this. Rule will be called font-family-fallbacks and it will report if font-family or font (if defines font) property doesn't have fallback fonts and a generic font last. It will have variable support on the same page. Is there anything I'm missing, or we can accept it?