I have few fonts that I am using in my web projects. Everything goes perfect while I am in Windows browsers, when I am in Linux and Mac browsers the fonts are placed a little bit far from the center, and it looks like it was pushed up with few pixels. This is annoying me because it’s really visible, and the design looks weird.
Is there a solution for this? maybe a hack or something …
Well here is the code snippet of my buttons with @font-face fonts http://db.tt/JoqiqK8i , I don’t know how to put fonts in jsfiddle, that’s why I uploaded to dropbox.
So, I found the answer to this question. A guy called rteslya from forrst told me about it, here is his post:
I have had similar problem few days ago. Different vertical align of the text with same line-height value. Windows was OK but Mac Safari gone crazy. I used fontsquirrel.com/ to generate my @font-face set. The problem was in option “BASIC”. Font generated with this option had different line-height in Mac. Solution (this helped me, but may not help you): Select “EXPERT…” Then in fields “Font Formats:” select “EOT Lite” “Subsetting:” select “Custom Subsetting…” other fields I left as default.