title: How to set a CSS font-family using JQuery when the font name has a space
body: <p>I'm trying to set the <code>font-family</code> property using the JQuery <code>css</code> method and running into a problem when the font name has a space.</p>
  
  <p>No matter how I quote or don't quote the font name, the element ends up like:</p>
  
  <pre><code>&lt;h1 style="font-family: "Comic Sans""&gt;Title Text&lt;/h1&gt;
  </code></pre>
  
  <p>with nested double quotes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var font_family = 'Arial Black';
  var $title_template = $('&lt;h1&gt;Title Text&lt;/h1&gt;');
  var $title;
  
  console.log(font_family)
  $title = $title_template.clone().css({'font-family': font_family});
  $('body').append($title)
  
  font_family = "'Arial Black'";
  console.log(font_family);
  $title = $title_template.clone().css({'font-family': font_family});
  $('body').append($title)
  
  font_family = '"Arial Black"';
  console.log(font_family);
  $title = $title_template.clone().css({'font-family': font_family});
  $('body').append($title)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;h1 style="font-family: 'Arial Black'"&gt;Title Text&lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>