CSS WebFont Rendering Issue - 1 Pixel different colour

Question

In Google Chrome(34.0.1847.131), possibly other browsers too, we're having an odd rendering issue with a web font using MyFonts.

As shown in the screenshots below there is a pixel at the top of the text which is loading the default/previous colour.

When hovered the top pixel line is white (the normal state colour), when inactive the top pixel line is the default text (non-anchor) colour.

This happens on all parts of the site where using the font and only occurs when using the webfont.

I've tried adjusting text rendering modes and line heights, neither fixed the problem.

The font-size is set to 100% (on all elements) and this inherits 16px from the body element, interestingly changing this to 18px resolves the rendering problem.

Have tried with other standard fonts, not with another webfont yet. The font files, I believe, are loaded directly not remotely.

SOLUTION Changed the anchor from display: inline; to display: inline-block; as the anchor wasn't fitting the text correctly.

Thanks

Answer 1

It's hard to say without looking at an actual example, but I think you might be experiencing this problem. The font metrics allow the font to run outside its container, and a bug in Chrome prevents these parts from recieving the hover color.

Try setting a background color on the element to see if there are any pixels actually running out of the element. To fix it, you'd need to make the element really wrap the text (by giving it a top padding, for example.)