CSS fontFamily assignment ending with number

Question

so it seems that if I assign a font family ending in a number, it won’t insert

a = document.createElement("div") a.style.fontFamily = "Arial" 

and a then

 <div style="font-family: Arial; "></div> 

BUT

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

and a then

 <div></div> 

I am sure this is the final number which is the problem. As

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

and a then

 <div style="font-family: 'Goudy Bookletter blablabla'; "></div> 

This is mistake? I do it in chrome 16

Answer 1

Something about spaces and numbers causes a problem when setting up a font family. Including the font family name in single quotes allowed me to work in Chrome 16 for me.

http://jsfiddle.net/ZMxS4/1/

 a.style.fontFamily = "'Goudy Bookletter 12'"; 

Without 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 

Answer 2

According to CSS specification :

Font family names must either be specified as strings, or incorrectly as a sequence of one or more identifiers. This means that most punctuation marks characters and numbers at the beginning of each token must be escaped into the names of unordered font names.

Regarding identifiers:

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

This means that the unquoted Goudy Bookletter 1911 is an invalid font family because 1911 is not a valid CSS identifier. "Goudy Bookletter 1911" is valid though, as without the quotes 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" also valid, and therefore a.style.fontFamily = "Goudy Bookletter \\31\\39\\31\\31" . Both work in Chrome 16, but this type of cheating is certainly not recommended.

Answer 3

Preliminary checks show that browsers do not parse the fontFamily property when a numerical value is inside it. Check out jsfiddle . I am going to write more about this.

It seems that if you remove the space in the name of the font that contains a numerical value, this will not cause a problem. Now browse the fiddle .

If the font family name contains spaces, it must be specified . This means that you must wrap your font name inside the quotation marks (one or two). Check out the latest fiddle .