Bolded google font shows text lower than usual

Question

I have a few headings which use the Vollkorn google font. I noticed that only in Firefox and Chrome that with the default bold weight and normal font style, the actual text gets pushed beyond the bottom boundary of the element. When I switch it to italic, it goes back up to normal. This doesn't happen when the font has a normal weight.

I've made a very bare HTML file which shows this behavior but the problem only exists for me, I sent the file to someone else and it was just fine with those two browsers.

I have tried to reproduce this on jsFiddle with no luck. http://jsfiddle.net/5WDJU/1/

a

Here is the code on Pastebin, I pasted jQuery into it for simplicity. http://pastebin.com/yXzHqKrD

Here is a screenshot to show the issue on my computer.

I also tried to reproduce this by going to the google font website and toggling the styles with Firebug but it was working fine.

Am I missing certain styles that would correct this like on jsFiddle and on the font website? Even so I don't understand why it wouldn't occur on the computer of the person I sent the file to. Is this a potential pitfall of google fonts?

Answer 1

After some more searching, I have managed to find two instances of the same problem occurring to other people. I don't believe this is an issue with the CSS anymore but I'm not sure whether the issue is due to Google's actual font or how Firefox and Chrome decides to render this particular font.

Here are the two links.

http://code.google.com/p/googlefontdirectory/issues/detail?id=37 http://productforums.google.com/forum/#!topic/chrome/QofmpbyZ7sQ

My solution which was taken from the first link was to download the bold non-italic font from FontSquirrel and embed it into my site.

Answer 2

Maybe this is a lineheight or padding problem. Try "inspect element" in chrome or safari (right-click) and view which styles are active on the input form. Did you try adding reset css? http://meyerweb.com/eric/tools/css/reset/