title: Using custom fonts with css font-face, different on different browsers
body: <p>Let me give you some examples:</p>
  
  <p>Firefox 13:</p>
  
  <p><img src="https://i.stack.imgur.com/k8kMD.png" alt="enter image description here"></p>
  
  <p>Chrome (latest):</p>
  
  <p><img src="https://i.stack.imgur.com/hIqD3.png" alt="enter image description here"></p>
  
  <p>As you can see, in Firefox the font appears smoother, and in Chrome choppier. I'm curious as to why this is happening and steps I can take to even out the experience for my users.</p>
  
  <p>I'm using an .otf font:</p>
  
  <pre><code>HelveticaNeueLTPro-LtCn.otf
  </code></pre>
  
  <p>And using the following CSS rules to apply this custom font:</p>
  
  <pre><code>@font-face {
      font-family: "Helvetica Neue LTPro";
      src: url("/Public/assets/fonts/HelveticaNeueLTPro-LtCn.otf");
  }
  
  a {
      color: #665548;                
      display: block;
      font-family: "Helvetica Neue LTPro";
      font-size: 15px;
      padding: 17px;                
  }
  </code></pre>
  
  <p>What do you recommend I use to even out the font differences? Or better yet, what's a good practice way to use "Web safe" fonts? Does such a thing exist?</p>