font-face and operating system vertical align

[blackhandr]

I found an interesting problem related to css font-face and operation system and not browsers. I’m developing a website and using the ITC Conduit mainly for headlines. I generated with fontsquirrel.com the @font-face. Everything browser displays the font, ff, ie, opera, safari chrome. Now I’m using the Conduit in a part, in buttons where I have to align the text verticaly. I tryed 3 different ways, setting the line-height same as the height, making the button display as table-cell and adding the vertical align middle propretty, and setting the top padding. The problem is the following in each case the font in Os x is with 5px upper then how it should be. Is not aligning verticaly. And in every browser. I’m testing the win borwser on xp sp2 and it works just fine. How any ideas what could be wrong and how it can be fixed? Here are some screenshots: http://dl.dropbox.com/u/430306/browser-screenshots.zip

[viniciuscandido]

Hello,
I`m with the same issues, do you found the some way to solve?

thks

[lasselakan]

Did any of you manage to solve the problem. I have the exact one. Have tried different font-face-fonts and some are working and some are not. Also thought the ITC fonts were certainly bad.

[Hangmeon]

I have found a solution for this issue.
The problem basically is with the behavior of the font line-height.

Resolving this issues requires modifying the font Vertical Metrics.

Anyway here is what you need to do:

• Go to http://www.fontsquirrel.com/tools/webfont-generator ;
• Add the font you want to use;
• Select “EXPERT…”
• In Font Formats select EOT Lite if you require IE support;
• In Rendering section, check “Fix Vertical Metrics” (!important);
• Agreement: — Agree :)

Use the generated font-kit and and enjoy life.

This tool basically gets the font Vertical Metrics straight, which is the actual issue.

[Author]

Posts