title: Why does my custom font have a positional offset in some browsers?
body: <p>When working on my website www.monkey-touch.com I started using a custom font for the headers and in several other places. It looks great and thanks to the font-squirrel it works on all browsers.</p>
  
  <p>However, I realized later that the fonts rendered differently in some browsers. Chrome, Opera and Safari all render the custom font slightly higher than others. This is not that big of an issue there, but when trying to add another page <a href="http://monkey-touch.com/sandbox/products.php" rel="nofollow">http://monkey-touch.com/sandbox/products.php</a> with the custom font of a big size, the offset becomes larger to the point where it is very much a nuisance as the text renders outside of the divs. </p>
  
  <p>Please note that the issue apparently has nothing to do with faulty css styling of other divs as even rendering the font in the body tag with no other divs has the offset as can be seen here: <a href="http://monkey-touch.com/Sandbox2/" rel="nofollow">http://monkey-touch.com/Sandbox2/</a></p>
  
  <p>Can anyone tell me why this is and what the best way is to fix the issue?</p>
  
  <p>My css for the font-face is:</p>
  
  <pre><code>@font-face {
  font-family: 'Bebas';
  src: url('bebas-webfont.eot');
  src: url('bebas-webfont.eot?#iefix') format('embedded-opentype'),
       url('bebas-webfont.woff') format('woff'),
       url('bebas-webfont.ttf') format('truetype'),
       url('bebas-webfont.svg#Bebas') format('svg');
  font-weight: normal;
  font-style: normal;
  </code></pre>
  
  <p>}</p>
  
  <p>Thanks all in advance.</p>