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


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


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


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?


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:


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


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