google fonts css overflow behaviour chrome vs firefox

Question

I'm creating a specific function on a webpage that requires CSS overflow to be consistent between Chrome and Firefox (and ideally IE as well). When using common web fonts such as Arial there are no problems, but once I start using google web fonts, I see a difference in the CSS overflow.

Here's a demo: jsfiddle demo This is a fixed width div with some sample text. "Playball" is a google font.

#box {
   height: 160px;
   width: 200px;
   border: black 1px solid;    
   font-size: 2em;
   font-family: 'Playball', cursive;
   overflow-x: hidden;
   overflow-y: scroll;   
}

1) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Arial", there is NO overflow-y in both browsers.

2) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Playball", there IS overflow-y in Firefox (see scrollbars) but NOT Chrome

How can I make the CSS overflow consistent between Chrome and Firefox?

EDIT: Per Kamal's comment below, I've added a line height to both divs and indeed the scrollbar appearance is now consistence. However, another problem is on the third line, "jumped over the" fits in Chrome but only "jumped over" fits in FF. Any ideas? Latest fiddle.

Answer 1

Try changing the line height, as both screenshots, to me, look a little different in the spacing only, between the lines. EDIT : You should also try adjusting letter-spacing.