title: Custom Font w/ @font-face: Rendering Differently on Windows and OS X
body: <p>I've been experiencing a problem with my custom font I included on my site.
  Here are three pictures to demonstrate the differences between how this font is rendered (based on OS).  </p>
  
  <p>Windows 7
  <img src="https://i.stack.imgur.com/Xujeq.png" alt="enter image description here"></p>
  
  <p>OS X Mavericks (non-retina)
  <img src="https://i.stack.imgur.com/64SyS.png" alt="enter image description here"></p>
  
  <p>OS X Yosemite (retina)
  <img src="https://i.stack.imgur.com/jVb4s.png" alt="enter image description here"></p>
  
  <p>Now, as you can see, the last two images render fine. The problem I'm experiencing is that the first image (Windows 7) has an odd issue with certain characters, such as "t" and "f". The only way I found to fix this was to make the font 1px larger (as the current font-size is 13px). However, doing this would require me to redesign a large part of my site.</p>
  
  <p>I have included the code for the <code>@font-face</code> below, along with some additional CSS.<br>
  <a href="http://paste2.org/WFmgF1Lw" rel="nofollow noreferrer">http://paste2.org/WFmgF1Lw</a></p>
  
  <p>Is there some CSS attribute I can add so that my font renders correctly on the Windows OS? If not, is there a way to fix this issue without having to increase the font size of every element that uses this font-face?</p>
  
  <p>Thanks!</p>