Note that all keywords are case-insensitive. User agents must not consider these keywords as matching the type. The keywords initial and default are reserved for future use and must also be quoted when used as font names.
The same behavior applies to a few other keywords, too:įont family names that happen to be the same as a keyword value ( inherit, serif, sans-serif, monospace, fantasy, and cursive) must be quoted to prevent confusion with the keywords with the same names. A very important difference! Other keyword values In other words, font-family: sans-serif means that a generic sans-serif font family will be used, while font-family: 'sans-serif' (with quotes) refers to an actual font that goes by the name of sans-serif. Authors are encouraged to append a generic font family as a last alternative for improved robustness. These keywords can be used as a general fallback mechanism, in case the desired font choices are not available. The spec defines the following generic family keywords: serif, sans-serif, cursive, fantasy, and monospace. This is implied by the spec text, too: an unescaped whitespace character can never be part of an identifier, so it can never start a “sequence of identifiers”. Ny whitespace characters before and after the name are ignored, and any sequence of whitespace characters inside the name is converted to a single space. The aforementioned CSS validator warning describes what happens if leading or trailing whitespace is used around identifier sequences: If a sequence of identifiers is given as a font family name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces. This is clarified a few paragraphs down in the spec: The former consists of three space-separated identifiers, the latter is simply a string. Therefore, font-family: Comic Sans MS is valid, and equivalent to font-family: 'Comic Sans MS'. Note: “a sequence of one or more identifiers” implies that multiple space-separated identifiers will form a single font family name. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names. Whitespaceīoth the CSS 2.1 and CSS3 Fonts Module Level 3 specs say:įont family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. Translated into regex: any string that matches ^(-?\d|-) is not a valid CSS identifier. For instance, the identifier B&W? may be written as B\&W\? or B\26 W\3F.
Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code. cannot start with a digit, two hyphens, or a hyphen followed by a digit. So, any character matching the regular expression is allowed in an identifier.
The highest code point currently allowed by Unicode is U+10FFFF.
The code point for hyphen-minus is U+002D, and for underscore (low line) it’s U+005F. Note that they’re actually talking about the hyphen-minus character - not the hyphen character, which is U+2010. ISO 10646 defines the Universal Character Set, which correlates to the Unicode standard.
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters and ISO 10646 characters U+00A0 and higher, plus the hyphen ( -) and the underscore ( _). Strings can either be written with double quotes or with single quotes. The spec says the following about strings: To grok the rules on font family names, we need to understand the difference between CSS strings and identifiers first. font-family: Comic Sans MS (without quotes) is perfectly valid CSS that works the way you’d expect it to. The warning message suggests that all font family names containing whitespace should be quoted, which is simply not true. However, this is an error in the CSS validator. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. Are the quotes in font-family: 'Comic Sans MS' required, or not?Īccording to the the CSS validator, the quotes are supposed to be there in this case because the font family name contains spaces:įamily names containing whitespace should be quoted.