JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=Playball"></script>
<div id="box1">
   The quick brown fox jumped over the lazy dog.
</div>
<p>Arial font:</p>
<p>No overflow in both Chrome and FF</p>

<br>

<div id="box2">
   The quick brown fox jumped over the lazy dog.
</div>
<p>Playball font:</p>
<p>Firefox 11.0: <span style="color:red;">YES y-overflow</span></p>
<p>Chrome 18.0.1025.142 m: NO y-overflow</p>

CSS

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

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


#box2::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 11px;
}

#box2::-webkit-scrollbar-thumb {
        border-radius: 8px;
    border: 2px solid #fff; /* should match background, can't be transparent */
    background-color: rgba(0,0,0,.5);
}

JavaScript

//Importing google fonts
WebFontConfig = {
    google: {
        families: ['Playball']
    }
};

(function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();