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

Mickelson

Answer 1

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

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

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):

Fix Vertical Metrics checked:

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 :)

Demulcent

appreciate your answer! I will try this out first and let you know :) – Mickelson

result: the option "Fix Vertical Metrics" helped! The height of the font looks perfect on windows and mac now. But still, the font looks different in thickness depending on the browser, any ideas @Tremolo ? – Mickelson

It may be due to different aliasing methods between OS:s. OSX renders thicker glyphs. The easiest workaround would be to play with -webkit-font-smoothing: eg. files.christophzillgens.com/webkit-font-smoothing.html. It only affects to OSX. subpixel-antialiased is the default. You may try antialiased, if it makes OSX to render lighter glyphs. Use antialiased only in captions and leave it as default in large text blocks to ensure maximum text legibility. – Roband

The other way is to try to bolden windows fonts eg. using 1px text shadow, but this is not very recommended solution. For me it seems that Windows renders ok thickness and you should try some way to make OSX rendering lighter. – Roband

In FontSquirrel there is also an option Truetype Hinting. It affects to the fitting of outlines to the pixel grid. You can read more eg. at smashingmagazine.com/2009/11/…. Try different settings (Font Squirrel, Keep Existing, TTFAutohint) in FontSquirrel, if it produces the result you are after. – Roband

Although Adobe Typekit fonts are of good quality, Firefox rendered a font too up in canvas compared to Chrome, when I tried to vertically center the text. I had to measure the top padding and bottom padding of letter 'M' drawn vertically centered on canvas and adjust the y-position of text by this. The code where I got the idea for this is here: videlais.com/2014/03/16/… (look at function PIXI.Text.prototype.determineFontHeightInPixels). – Roband

Answer 2

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.

Demulcent

Answer 3

Unfortunately when it comes to embedded fonts it's up to the OS to decide how to render it, and the only real way around it is to have different styles handling rendering changes for each OS. That being said you could try to find a comparable font in the Google Fonts library, they seem to similarly cross-OS. I've never had this issue with them.

If you would like to detect which OS the end-user is accessing your site from you can use a bit of javascript/jQuery to detect this. Then with a bit of hacking you can apply styles to each OS.

Javascript w/ jQuery

if (navigator.userAgent.indexOf('Mac OS X') != -1) {
    $("body").addClass("mac");
} else {
    $("body").addClass("pc");
}

CSS

.mac h1 {
    font-family: "Lovelo Black";
    //your mac specific styles
}

.pc h1 {
    font-family: "Lovelo Black";
    //your windows specific styles
}

Essentially in your CSS you need to prefix all styles including the font with the class you applied to body.

Tremolo

thank you for the answer! how can I set the font a bit lower just for osx? – Mickelson

I am very grateful for you answer! I'll try it out – Mickelson

Answer 4

To your original issue - appears different (higher) on Mac vs Windows - I had the exact same issue. I'd recommend trying to download your font file (.ttf or .oft etc) from a different source. I had initially fixed the issue by using Javascript to detect whether the user agent was Mac or Windows. If it was Mac, I'd add additional custom styling to fix how the font appears due to it being on Mac. But I didn't like this solution, too cumbersome. Instead I tried a different source (and different file type - e.g.: otf vs ttf) and the issue went away.

Condyloma

Answer 5

Font squirel's webfont generator fixed this for me.

1. Go here: https://www.fontsquirrel.com/tools/webfont-generator
2. Upload your font
3. Press 'Expert'
4. Check 'Auto-adjust vertical metrics'
5. Download your fonts and put them in your project

(:

Bashaw