Webfont + hover color: part of text not changing color

Question

I\'ve seen this a few times, only on Webkit. The scenario is that you have some text with a hover color, and it\'s using a webfont custom font. When you hover, part of the fur

Answer 1

The reason the right few pixels arent't given their :hover color is because they run outside the a container. Inspect it or give it a background color and you can see this. A workaround is faking the extra space by giving the a some extra padding-right.

I'm not sure how exactly the glyph is able to run outside the container, so I'm be interested if anyone else knows. For now I'm sharing celeriko's suspicion that this font's metrics are borked.

EDIT: Turns out it's the font's side bearings that allow for the glyph to run outside its bounding box. This is common with brush script fonts and allows individual letters to connect by slightly overlapping eachother. So it's a valid property of the font, unfortunately causing a problem the original typographers didn't have to account for — no hover states on paper ;)