title: @font-face svg not working properly in Chrome?
body: <p>I have an issue with a specific font and the way it's rendered in Chrome.</p>
  
  <p>Firefox shows the font properly due to using ttf. </p>
  
  <p>Chrome doesn't use antialias and the font is too 'sharp' and ugly. </p>
  
  <p>This is the css declaration I used </p>
  
  <pre><code>@font-face {
      font-family: 'HelveticaNeueLT Std Thin';
      src: url(../fonts/h2.eot);
      src: url(../fonts/h2.svg#test) format('svg'),
           url(../fonts/h2.woff) format('woff'),
           url(../fonts/h2.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
  }
  </code></pre>
  
  <p>I have come to the conclusion that the problem is with the svg declaration/font file.
  If I don't use the hash tag at all and leave it as only .svg, it renders antialiased but at a different line-height, with slightly off positioning. If I add .svg#anything, it doesn't antialias it at all and looks ugly. </p>
  
  <p>Any suggestions are welcome to help me fix this rather annoying problem.</p>
  
  <p>PS: Windows antialiasing is OK, i tested this. I also tried out the <code>@media screen and (-webkit-min-device-pixel-ratio:0)</code> declaration for the svg font only, to no success.
  I realize this may be a repost but having tried all the solutions from the related questions, I'm a bit desperate.<img src="https://i.stack.imgur.com/hD8XX.png" alt="enter image description here"></p>