Search code examples
htmlcssfontsfont-face

custom font looks different (higher) on Mac OS X

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 and mac normal font on windows/mac

custom font on windows custom font on windows

custom font on mac 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');
}
Solution

  • http://www.fontsquirrel.com/tools/webfont-generator is one possibility.

    There is a checkbox: Rendering: Fix Vertical Metrics (Normalize across browsers):

    ![enter image description here

    At least when the checkbox is checked or not generates different vertical metrics in generated ttf-file.

    Fix Vertical Metrics not checked (when inspected in FontCreator):

    enter image description here

    Fix Vertical Metrics checked:

    enter image description here

    Downloaded kit has also ccs-file, but seems that there are not browser-specific hacks. I assume that this could be handled in font side by fixing metrics.

    To check my assumption I used font from Typekit.net and compared the generated css file (Typekit fonts are base64-encoded in css) with OSX Chrome and Win Chrome and the base64-encoded font files were identical. This seems to confirm that it is possible to fix font metrics in a cross-browser way.

    So I think that the accepted answer that suggests generating browser-specific css fixes is not necessary.

    However I don't know how good FontSquirrel is in this normalization. If you test it, please report your findings :)