Search code examples
htmlcssgoogle-chromefont-face

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 or Firefox. it seems to be top and bottom.

I did all the obvious css tricks like:

margin: 0;
padding: 0;

But this seems to be an issue with the font themselves.

Here is one of the fonts: 

@font-face {
    font-family: 'Bebas';
    src: url('bebas.eot');
    src: url('bebas.eot?#iefix') format('embedded-opentype'), url('bebas.woff') format('woff'), url('bebas.svg#BebasRegular') format('svg'), url('bebas.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

does anyone know any coding tricks to fix or a better way to convert/download?

Solution

  • 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>