Why does my custom font have positional bias in some browsers?

Question

When working on my site www.monkey-touch.com, I started using a custom font for headlines and in several other places. It looks great and thanks to the font-squirrel function it works in all browsers.

However, later I realized that fonts display differently in different browsers. Chrome, Opera, and Safari display custom fonts slightly higher than others. This is not so important, but when you try to add another page http://monkey-touch.com/sandbox/products.php using a special large font, the offset becomes so large that it is very unpleasant because the text is displayed outside the div.

Note that the problem, apparently, has nothing to do with the erroneous CSS style for other sections, since even displaying the font in the body tag without any other divs has an offset that can be seen here: http: // monkey-touch .com / Sandbox2 /

Can someone tell me why this is and how best to fix the problem?

My css for the font:

@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; 

}

Thanks to everyone in advance.

Answer 1

I figured it out, and it is rather strange and consists of two things.

1) .ttf and .eot I received from the font-protein was not good. Getting the original .ttf back from the font site and converting it to .eot yourself was necessary for the correct transfer. I don’t know if this is really a font-protein mistake, because the differences in output seem very arbitrary and strange, see also point 2).

2) Removing the .woff entry from css. Woff was added only for security, I was not sure if it was used by anyone, but it seems that all browsers still display it correctly.

It seems very strange, because in browsers everyone uses the same .ttf (except IE8 and less, which use .eot), but they do it differently. In addition .woff must be removed, why? Although I solved my problem, it still seems like a rather random and strange problem. If someone knows more about this, I would love to know.

Hope this question is helpful to others. font-face is still a long way to being easy to use, and browsers need to be more careful about matching this correctly.

Answer 2

The problem is because the browser refuses to calculate the exact boundaries of the glyphs (done to improve performance.)

The solution to this problem is to add a separate line of text to your CSS:

 text-rendering:optimizeLegibility; 

this line can be added to CSS from a div that requires it, and thus no additional processing is performed for the rest of the page.

Answer 3

You need to specify the height of the line. Try

 body,html { line-height: 18px; /* or whatever height you want */ }