title: How Do I Override Body CSS For Whole Page?
body: <p>There is a webpage named <code>index.html</code> which has all the CSS and JS files. There are already <code>body</code> properties like <code>font-family</code>, <code>font-size</code>, <code>color</code>.</p>
  <p>I want to add my own CSS to the <code>body</code>. I am using jQuery for this, where <code>response['body_tag']</code> is a Google font name.</p>
  <p>It is not overriding anything at all and I am seeing no changes.</p>
  <pre class="lang-js prettyprint-override"><code>$('body').css({
    &quot;font-family&quot;: response['body_tag'] + &quot; !important&quot;,
    &quot;font-size&quot;: &quot;10px&quot;,
    &quot;color&quot;: &quot;red&quot;,
  });
  </code></pre>
  <p>Here's the debug console: (Font-size and color is getting cheanged , but font-family doesn't)</p>
  <p>there are no errors in console too.</p>
  <p><a href="https://i.stack.imgur.com/i1p5d.png" rel="nofollow noreferrer">enter image description here</a></p>