title: CSS Font Style Changes Not Working in Chrome
body: <p>Could someone clarify why the below font style settings is not working in chrome, but working in IE and FireFox. </p>
  
  <p>My website has the same problem, it does not pick up the CSS font settings (where <code>normal</code> is mentioned), hence I tested with <a href="https://www.w3schools.com/code/tryit.asp?filename=FH0GEHKS1HVA" rel="nofollow noreferrer">the CSS test environment from W3Schools</a> and the behavior is same. </p>
  
  <p><strong>CSS Snippet:</strong></p>
  
  <ul>
  <li>Working only in IE/FireFox: <code>font-family: Arial, Helvetica, sans-serif normal;</code></li>
  <li>Working in All Browsers: <code>font-family: Arial, Helvetica, sans-serif;</code></li>
  </ul>
  
  <p>Try in Chrome and IE to see difference.</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-css lang-css prettyprint-override"><code>body {
    font-family: "Times New Roman", serif;
  }
  p.serif {
    font-family: Arial, Helvetica, sans-serif;
  }
  p.sansserif {
    font-family: Arial, Helvetica, sans-serif normal;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;CSS font-family&lt;/h1&gt;
  &lt;p class="serif"&gt;This is a paragraph, shown in Arial Without Normal.&lt;/p&gt;
  &lt;p class="sansserif"&gt;This is a paragraph, shown in Arial With Normal&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Below are the questions:</strong></p>
  
  <ul>
  <li>Could you clarify why the behavior difference between these two browsers?</li>
  <li>How to ensure my CSS font styles are picked by Chrome and IE/FireFox (Should I remove <code>normal</code> from all my CSS files or is there any better way to do it)?</li>
  </ul>