custom fonts with different vertical metrics betwe

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

Set a fixed value, for example in px, for the line-height css property.

Answer 2

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

Answer 3

I had the same problem with this font: http://www.fontsquirrel.com/fonts/Symbol-Signs

I downloaded the prepackaged @font-face kit and the metrics were inconsistent between Mac and PC.

The solution was to take the TTF font out of the downloaded kit and use it to export a new @font-face kit with Font Squirrel's generator. The generator has a checkbox in the Expert Settings labeled "Fix Vertical Metrics". Make sure this is checked before you generate your kit.