title: Extra padding or margin on custom font in Chrome
body: <p>I have a couple of fonts that I downloaded as a kit (ttf, eot, woff, etc).  However, in Chrome, they seem to have extra <code>padding</code> or <code>margin</code> that does not show up in Internet Explorer or Firefox.  it seems to be top and bottom.</p>
  
  <p>I did all the obvious css tricks like:</p>
  
  <pre><code>margin: 0;
  padding: 0;
  </code></pre>
  
  <p>But this seems to be an issue with the font themselves.</p>
  
  <p>Here is one of the fonts: </p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>does anyone know any coding tricks to fix or a better way to convert/download?</p>