Unable to set font family on & ldquo; Arial Black & rdquo; Via JavaScript in Firefox

advertisements

I am unable to set a font-family with a name containing a space via JavaScript in Firefox, while it works in Chrome.

HTML

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

JavaScript

window.document.getElementsByTagName('li')[1].style.fontFamily = '"arial black", consolas';

Here is a JsFiddle

In Firefox the first family name gets ignored, apparently because the string is interpreted as ""arial black", consolas". So Firefox displays the text in Consolas. But Chrome gets it right...

Is there a way around this behaviour?

Edit

Environment :

  • Intel NUC with 16 GB RAM, i7
  • Windows 8.1 Pro
  • 64-bits
  • French

Arial Black is the 900 weight of the Arial family. Try this:

CSS:

font-family:"Arial Black", Gadget, Arial, sans-serif;
font-weight: 900;

JavaScript:

window.document.getElementsByTagName('li')[1].style.fontFamily = '"Arial Black", Gadget, Arial, sans-serif;';
window.document.getElementsByTagName('li')[1].style.fontWeight = "900";