Custom fonts with different vertical metrics between OS

Question

I am trying to include a custom font for the page I am creating. My problem is that vertical font alignment looks different on my ubuntu development machine and on Windows computers.

First, here are the images to understand the problem

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

The problem is the distance between the base font base and the element below it. There is an inexplicable space on my ubuntu machine that it is not a cushion / margin. Even if you select the text, it looks inconsistent.

Both are tested on Chrome, the same html / css behind it, of course (this is the same page). There are no bottom margins / indents for both the code and the chrome inspector. The same line is the height. Font - Museo. Both download the .woff version of the font. Any other information I would be happy to provide.

Css to import font:

@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 continued even when I removed the woff ad and ttf provided the font.

I really lost this, I don’t know how I can do the same. Any help would be greatly appreciated!

Answer 1

Fonts have three sets of information about embedded vertical metrics. One kit for Mac, one kit for PC, and another kit commonly used * nix. It may be difficult to synchronize, but our font generator is trying to get these values ​​the same. Give it a try?

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

Additional information from a team such as Google:

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

Answer 2

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

I downloaded the prepackaged @ font-face package, and the metrics were not compatible between Mac and PC.

The solution was to pull the TTF font from the downloaded set and use it to export the new @ font-face set with the Font Squirrel generator. The generator has a flag in the expert settings with the inscription "Fix Vertical Metrics". Before creating a kit, make sure this box is checked.

Answer 3

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