CODEWITHSUNDEEP
css
Denees
Denees

Reputation: 9198

Padding problems in Linux & Mac browsers comparing to Windows with @font-face

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 ...enter image description here

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.

Upvotes: 3

Views: 2172

Answers (3)

Thanh Tran
Thanh Tran

Reputation: 41

I also ran into this problem, not only Linux but also iOS/Android (my project was a Phonegap app). None of the solutions I found here or elsewhere helped me fix it effectively and I had to use padding compensation everywhere in the CSS which was a painful experience.

So, I tried resolving it again, digging into the font file metrics settings using Fontforge and I have found the root cause and solution to it.

Here are the fix steps:

  1. Open the troubled font file (TTF or WOFF) with FontForge
  2. Open menu Element > Font Info...

  3. Select setting item OS/2 > tab Metrics.

    If your font is defective, the HHead (Ascent Offset, Descent Offset, Line Gap) input boxes will be set with some values other than 0

  4. Set all HHead* values to 0. > OK
  5. Then you can generate (File > Generate Fonts) the font to various web font files (TTF - TrueType, WOFF, SVG). Note that just ignore any warnings during the font validation before it is generated.

I tried the fix on the fonts included from the question and it really worked! Here's a demo on Dabblet with original and fixed fonts side by side (the difference may be seen on Mac & Linux only).

I'm not a regular Stackoverflow poster so I can't post many ref links and images. You can visit my blog post for more insight and details.

Upvotes: 4

Denees
Denees

Reputation: 9198

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.

Upvotes: 1

Rvervuurt
Rvervuurt

Reputation: 8963

A friend of mine had the same problem recently.

The fix is: work with em instead of px. The element px is interpreted a bit different in every browser, while em is always the same (at least: I have not found a browser that does it different yet).

Good luck!

P.S. If that doesn't work, please put it on a server so we can play around with "inspect element".

Upvotes: 1

Related Questions