title: Icon font rendering terribly on chrome
body: <p>I'm using an icon font which renders perfectly on firefox and safari, but very poorly on chrome. I've played with the -webkit-font-smoothing properties but no to effect.</p>
  
  <p><strong>Chrome (v56 osx):</strong>
  <a href="https://i.stack.imgur.com/sPLkS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sPLkS.png" alt="Chrome"></a></p>
  
  <p><strong>Safari:</strong> 
  <a href="https://i.stack.imgur.com/rsjsg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rsjsg.png" alt="Safari"></a></p>
  
  <p><strong>Firefox</strong>
  <a href="https://i.stack.imgur.com/nBgSU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nBgSU.png" alt="Firefox"></a></p>
  
  <p><strong>Css</strong></p>
  
  <pre><code>@font-face {
      font-family: 'Glyphter';
      src: url('../fonts/Glyphter.svg#Glyphter') format('svg');
  
      src: url('../fonts/Glyphter.eot');
      src: url('../fonts/Glyphter.eot?#iefix') format('embedded-opentype'),
           url('../fonts/Glyphter.woff') format('woff'),
           url('../fonts/Glyphter.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
  }
  
  [class*='icon-']:before{
      display: inline-block;
     font-family: 'Glyphter';
     font-style: normal;
     font-weight: normal;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
      font-size: 120px;
  }
  </code></pre>