custom font looks different (higher) on Mac OS X

Question

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.

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?

normal font on windows/mac

custom font on windows

custom font on mac

CSS-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');
}

Answer 1

The question is two-parted. Because this is so unrelated to the first part of the question (vertical metrics inconsistency), I add a new answer regarding the other part of the question.

The text rendering engines make different thickness when applying antialiasing to texts. OSX makes by default thicker glyphs when the default subpixel-antialiasing is used. The amount of "boldness" can be tweaked in OSX settings.

But if you don't want to ask people to touch their OS and want something that can be done by javascript/css, then there is one option.

OSX renders thinner glyphs when antialiasing type is set to grayscale. Safari and Chrome and Opera makes use of -webkit-font-smoothing: antialiased; and Firefox -moz-osx-font-smoothing: grayscale;.

But this may not be enough, because light text in dark background can make glyphs too thin. To make them a bit bolder, you can use specific text-shadow-hack (codepen):

#div1 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: #999 0.1px 0px 0px, #999 -0.1px 0px 0px;

  background-color: black;
  width: 100px;
  height: 40px;
  color: white;
  line-height: 40px;
  text-align: center;
  font-family: 'Open Sans';
  font-size: 16px;
}

The first part in text-shadow #999 0.1px 0px 0px makes a thin shadow to the right, and the second part #999 -0.1px 0px 0px; to the left. This ensures that the glyphs are not too thin. I find that using text-shadow color #fff made the glyphs too bold in some browsers (eg. in Win FF), so making it a bit darker fixed this.

While this "boldening" by text-shadow is needed mainly to fix too thin grayscale-antialiased glyphs in OSX, it makes better results also in Windows. In Windows and Linux however *-font-smoothing has no effect, so there the default subpixel-antialiasing is used.

Here you can see the effect in practice in 9 different browsers. For me this produces rather similar boldness:

Here are the details of the test (text blocks in the above are snipped from the "Hacked" row:

CAUTION: This technique is only suitable in light texts in dark background, preferably in buttons or similar. In large text blocks you have to take into account the legibility of text and usually subpixel-antialiasing provides better legibility. If the colors are other than black and white, you may want to adjust the text-shadow color. In large text blocks using text-shadow can affect to the rendering time.