Webfont position rendering issue

Question

I'm using a customized webfont on my page and I'm having some rendering issues in different platforms. The alignment of the text in the blocks is somewhat different in linux and windows. Here's an example:

Chrome in Linux:

Chrome in Windows:

They're both using the same version of the font (otf), the styles are exactly the same (same line-height and margins).

Here's the source of the font-face:

@font-face {
  font-family: 'Calibre Regular';
  src: url('fonts/Calibre-Regular.eot') format('embedded-opentype'),
       url('Calibre-Regular.otf')  format('opentype'),
       url('fonts/Calibre-Regular.woff') format('woff'),
       url('fonts/Calibre-Regular.ttf')  format('truetype'),
       url('fonts/Calibre-Regular.svg#Calibre-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Is there any way to solve this?

Answer 1

This is can be caused by webkit when rendering custom fonts try using -webkit-font-smoothing. The default value of which is subpixel-antialiased. Try setting:

h1,h2,h3,h4,h5,h6 {
    -webkit-font-smoothing: antialiased;
}

Alternative solution

If the above doesn't work then this may work, I had a similar issue before with chrome and randomly found this fix on the interent. Not sure where but it basically forces Chrome to use the SVG version of the font.

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'nameOfFontFamily';
        src: font-url('url/to/svgfont.svg') format('svg');
    }
}