Specify whether or not quotation marks should be used around font family names.
a { font-family: "Times New Roman", 'Ancient Runes', serif; }
/** ↑ ↑ ↑ ↑
* These quotation marks and this one */
This rule checks the font
and font-family
properties.
This rule ignores $sass
, @less
, and var(--custom-property)
variable syntaxes.
string
: "always-where-required"|"always-where-recommended"|"always-unless-keyword"
Please read the following to understand these options:
font
and font-family
properties accept a short list of special keywords: inherit
, serif
, sans-serif
, cursive
, fantasy
, system-ui
, and monospace
. If you wrap these words in quotes, the browser will not interpret them as keywords, but will instead look for a font by that name (e.g. will look for a "sans-serif"
font) -- which is almost never what you want. Instead, you use these keywords to point to the built-in, generic fallbacks (right?). Therefore, all of the options below enforce no quotes around these keywords. (If you actually want to use a font named "sans-serif"
, turn this rule off.)$
, !
or /
, but does not require quotes just because it contains spaces or a (non-initial) number or underscore. You can probably bet that almost every font family name you use will be a valid CSS identifier.-apple-system
and BlinkMacSystemFont
.For more on these subtleties, read “Unquoted font family names in CSS”, by Mathias Bynens.
Caveat: This rule does not currently understand escape sequences such as those described by Mathias. If you want to use the font family name “Hawaii 5-0” you will need to wrap it in quotes, instead of escaping it as Hawaii \35 -0
or Hawaii\ 5-0
.
"always-unless-keyword"
Expect quotes around every font family name that is not a keyword.
The following patterns are considered violations:
a { font-family: Arial, sans-serif; }
a { font-family: Times New Roman, Times, serif; }
a { font: 1em Arial, sans-serif; }
The following patterns are not considered violations:
a { font-family: 'Arial', sans-serif; }
a { font-family: "Times New Roman", "Times", serif; }
a { font: 1em 'Arial', sans-serif; }
"always-where-required"
Expect quotes only when quotes are required according to the criteria above, and disallow quotes in all other cases.
The following patterns are considered violations:
a { font-family: "Arial", sans-serif; }
a { font-family: 'Times New Roman', Times, serif; }
a { font: 1em "Arial", sans-serif; }
The following patterns are not considered violations:
a { font-family: Arial, sans-serif; }
a { font-family: Arial, sans-serif; }
a { font-family: Times New Roman, Times, serif; }
a { font-family: "Hawaii 5-0"; }
a { font: 1em Arial, sans-serif; }
"always-where-recommended"
Expect quotes only when quotes are recommended according to the criteria above, and disallow quotes in all other cases. (This includes all cases where quotes are required, as well.)
The following patterns are considered violations:
a { font-family: Times New Roman, Times, serif; }
a { font-family: MyFontVersion6, sake_case_font; }
a { font-family: 'Arial', sans-serif; }
a { font: 1em Times New Roman, Times, serif; }
The following patterns are not considered violations:
a { font-family: 'Times New Roman', Times, serif; }
a { font-family: "MyFontVersion6", "sake_case_font"; }
a { font-family: Arial, sans-serif; }
a { font: 1em 'Times New Roman', Times, serif; }