CODEWITHSUNDEEP
htmlcssfontsfont-facewebfonts
Guilherme Vierno
Guilherme Vierno

Reputation: 111

Webfont position rendering issue

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: enter image description here

Chrome in Windows: enter image description here

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?

Upvotes: 2

Views: 826

Answers (2)

DavidT
DavidT

Reputation: 2481

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');
    }
}

Upvotes: 2

jan199674
jan199674

Reputation: 753

Browsers render elements different - could be the issue even if its the same browser. Define margin, padding and line-height in your CSS - you could use a 'reset.css'.

Try this:

p,h1,h2,h3,h4,h5,h6  {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

Upvotes: 0

Related Questions