title: custom font looks different (higher) on Mac OS X
body: <p>I am using a custom-font. The font works perfectly on my Windows PC, but not on my Mac (Yosemite OSX). As you can see at the pictures the font is a bit higher on Mac than on Windows. Same on all browsers.</p>
  
  <p>I am using border-top in the picture... you can clearly see the problem. On the entire website the font is a bit higher than normal, how can I fix this?</p>
  
  <p><a href="https://i.stack.imgur.com/tIRmk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tIRmk.png" alt="normal font on windows and mac"></a>
  <em>normal font on windows/mac</em></p>
  
  <p><a href="https://i.stack.imgur.com/NHDs5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NHDs5.png" alt="custom font on windows"></a>
  <em>custom font on windows</em></p>
  
  <p><a href="https://i.stack.imgur.com/X8bwq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X8bwq.png" alt="custom font on mac"></a>
  <em>custom font on mac</em></p>
  
  <p>CSS-Code:</p>
  
  <pre><code>@font-face {
      font-family: "Lovelo Black";
      src: url('../fonts/lovelo_black.otf') format('opentype');
      src: url('../fonts/lovelo_black.ttf') format('truetype');
      src: url('../fonts/lovelo_black.eot') format('eot');
      src: url('../fonts/lovelo_black.svg') format('svg');
      src: url('../fonts/lovelo_black.woff') format('woff');
  }
  </code></pre>