Extra Padding Or Margin On Custom Font In Chrome

I have a couple of fonts that I downloaded as a kit (ttf, eot, woff, etc). However, in Chrome, they seem to have extra padding or margin that does not show up in Internet Explorer

Solution 1:

FOR LIVE DEMO

Bebas Neue is available on direct link source. margin 0 and padding 0 functions seem to be working fine.

tested in Chrome - works
tested in IE7 - works


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript"  src='http://cdn.renderedfont.com/js/renderedfont-0.8.min.js#free'></script>


  body
  {
    margin: 0;
    padding: 0;
  }
  h1
  {
    font-family: "Bebas Neue", Arial; 
    font-size: 40px; 
    color: #99f;
  }



<h1 class="renderedFont">Bebas Neue</h1>