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.
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With