Assigning A CSS FontFamily Ending With A Number

so it seems that if I assign a font family ending with a number it doesn't stick a = document.createElement('div') a.style.fontFamily = 'Arial' and a is then

;

Without the quotes I saw the following odd behavior

a.style.fontFamily = "Goudy Bookletter12"; //works
a.style.fontFamily = "Goudy 12Bookletter"; //works
a.style.fontFamily = "Goudy 12 Bookletter"; //does not work

Solution 2:

According to the CSS specification:

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means most punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

Regarding identifiers:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

This means that unquoted Goudy Bookletter 1911 is an invalid font family, because 1911 is not a valid CSS identifier. "Goudy Bookletter 1911" is valid, though, as is unquoted Goudy Bookletter blablabla.

Therefore, you should use

a = document.createElement("div")
a.style.fontFamily = '"Goudy Bookletter 1911"'

By the way, a.style.fontFamily = "Goudy\\20 Bookletter\\20 1911" is also valid, and so is a.style.fontFamily = "Goudy Bookletter \\31\\39\\31\\31". Both work in Chrome 16, but this kind of trickery is of course not recommended.

Solution 3:

Preliminary checks show that browsers don't parse fontFamily property, when a numeric value is inside it. Check this jsfiddle. I'm gonna write more about this.

It seems that if you remove the space in the font name, which contains numeric value, it won't encounter a problem. See this fiddle now.

If a font-family name contains whitespace, it must be quoted. This means that you should wrap your font name, inside quotes (single or double). Check this last fiddle.

Share