Search code examples
csscross-platformfont-face

@font-face font gains padding in Windows

I have come across an odd problem using 'Helvetica Neue W01 97 Black Cn' @font-face font from webfonts.fonts.com

When used in Windows based browsers (tested FF and IE), in this case in a submit button, the text seems to acquire an extra 4px or so of padding (see ff-pc-style.png). In the case of my current design, this centers it perfectly in the submit box.

In OS X, across Firefox, Safari, Chrome and Opera, the padding is lost, yet an extra 0.4px is added to the line height and height (see ff-pc-style.png).

If I remove the custom font, the fallback font (Arial), appears properly centered in OS X.

Why does this occur? And how would I get round it?

Platform detection seems like overkill just to fix a font ...

ff-pc-style.png

ff-pc-style.png

ff-pc-style.png

ff-pc-style.png

Solution

  • E-mail reply from fonts.com support:

    A fault has been found in the font data hinting. It is being looked at now. Once the data has been updated, I expect that you will only have to log into your account and just save and update your stylesheet to update your page.