title: Font Rendering in Browsers
body: <p>I am trying to use Impact Font in my website for heading and it reders like this in the browsers.</p>
  
  <p><img src="https://i.stack.imgur.com/xFdc5.png" alt="enter image description here"></p>
  
  <p>In Photoshop it looks like this</p>
  
  <p><a href="http://variable3.com/files/screenshots/2011-04-04_1612.png" rel="nofollow noreferrer">http://variable3.com/files/screenshots/2011-04-04_1612.png</a></p>
  
  <p>CSS CODE</p>
  
  <pre><code>h1{
      font-family: Impact, Haettenschweiler, Arial Narrow Bold, sans-serif;
      font-size:30px;
  }
  h2{
      font-family: Impact;
      font-size:24px;
  }
  </code></pre>