title: google fonts css overflow behaviour chrome vs firefox
body: <p>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.</p>
  
  <p>Here's a demo: <a href="http://jsfiddle.net/YPjRE/5/" rel="nofollow noreferrer">jsfiddle demo</a>
  This is a fixed width div with some sample text. "Playball" is a google font.</p>
  
  <pre><code>#box {
     height: 160px;
     width: 200px;
     border: black 1px solid;    
     font-size: 2em;
     font-family: 'Playball', cursive;
     overflow-x: hidden;
     overflow-y: scroll;   
  }
  </code></pre>
  
  <p>1) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Arial", there is NO overflow-y in both browsers.
  <img src="https://i.stack.imgur.com/fmQNO.jpg" alt="FF(L) vs Chrome(R), ARIAL, NO overflow-y"></p>
  
  <p>2) Screenshot of running jsfiddle demo on Firefox (L), and Chrome (R). Using "Playball", there <strong>IS overflow-y in Firefox (see scrollbars)</strong> but NOT Chrome
  <img src="https://i.stack.imgur.com/8yEx6.jpg" alt="FF(L) vs Chrome(R), PLAYBALL, overflow-y"></p>
  
  <p>How can I make the CSS overflow consistent between Chrome and Firefox?</p>
  
  <p>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? <a href="http://jsfiddle.net/YPjRE/14/" rel="nofollow noreferrer">Latest fiddle</a>.</p>
  
  <p><img src="https://i.stack.imgur.com/hTj3c.jpg" alt="Chrome L, FireFox R"></p>