title: Webfonts rendering differently on Windows, Mac and Linux
body: <p>I'm using webfonts for the first time on a website I'm currently making and I noticed that the bounding boxes of the fonts seem to be different on Windows and Linux &amp; Mac (same on Linux &amp; Mac that is). This is not browser dependent as the same versions of Chrome and Firefox on all operating systems have these differences. Basically, on Windows, there is extra space on top of the character, while on Linux and Mac the character's bounding box is much closer to the actual top of the character (and for example umlauts are outside the box). This naturally changes the way positions, margins, etc. behave.</p>
  
  <p>Currently the font is defined like this:</p>
  
  <pre>
  @font-face { font-family: "FranklinGothicHand"; 
      src: url('fonts/franklingothichanddemi-webfont.eot'); 
      src: url('fonts/franklingothichanddemi-webfont.eot?iefix') format('eot'),
          url('fonts/franklingothichanddemi-webfont.woff') format('woff'),
          url('fonts/franklingothichanddemi-webfont.ttf') format('truetype'),
          url('fonts/franklingothichanddemi-webfont.svg#webfontLgJOAlmK') format('svg'); 
  } 
  </pre>
  
  <p>Because of this, for example, I can't properly vertically align a decorated initial cap of an article to the first line of the article since its position is different on different operating systems.</p>
  
  <p>Can anyone think of any solution for this?</p>