custom fonts with different vertical metrics between OS's

Question

I am trying to include a custom font for a page I am building. My problem is that the font vertical alignment looks different on my ubuntu development machine and on windows pc's.

First, here are the images to understand the problem

Edit: unfortunately as a new user I cannot post images, so here is a description:

The issue is the distance between the fonts baseline and the element beneath it. There is an unexplained gap on my ubuntu machine that it's not a padding/margin. Even if you select the text it looks misaligned.

Both tested on Chrome, same html/css behind it of course (it's the same page). No bottom margins/padding both on code and on the inspector tool of chrome. Same line-height. The font is Museo. Both load the .woff version of the font. Any other information, I would be happy to provide.

The css for importing the font is:

@font-face {
  font-family: 'Museo-700';
  src: url('path-to-eot');
  src: url('path-to-eot?') format('embedded-opentype'),
       url('path-to-woff') format('woff'),
       url('path-to-ttf') format('truetype');  
}

The problem persisted even when I removed the woff declaration and ttf was providing the font.

I am really lost with this, no idea how I can make it the same.

Answer 1

Fonts have three sets of embedded vertical metrics information. One set for Mac, one set for PC and another set typically used by *nix. These can be difficult to synchronize but our Font-face Generator does try to get these values the same. Give it a try?

http://www.fontsquirrel.com/fontface/generator

More info from the Google type team:

http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations