Why does my custom font have a positional offset in some browsers?

Question

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.

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 http://monkey-touch.com/sandbox/products.php 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.

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: http://monkey-touch.com/Sandbox2/

Can anyone tell me why this is and what the best way is to fix the issue?

My css for the font-face is:

@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 all in advance.

Answer 1

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

1) The .ttf and .eot I got from the font-squirrel were no good. Getting the original .ttf back from the font-site and converting it to .eot myself was necessary for proper rendition. I do not know whether this is actually font-squirrel's fault because the differences in rendition seem very arbitrary and strange, also see point 2).

2) Removing the .woff entry from the css. The .woff was only added for safety, I was not sure whether this was used by any, but it seems all browsers still render it correctly.

It seems very bizarre, because the browsers involved all use the same .ttf (except IE8 and less which use the .eot) but render it differently. Also the .woff has to be removed, why? ALthough I have solved my problem it still seems a rather random and strange problem. If anyone knows more about this stuff I would love to know.

I hope this question will be of use to others to come. font-face has still a long way to go in being easy to use, and browsers should be more wary of proper compliance regarding it.

Answer 2

The problem is caused by the browser negating to compute exact glyph bounds (Done for the sake of performance.)

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

text-rendering:optimizeLegibility;

this line can be added to the CSS of the div that requires it, and that way there's no extra processing done to the rest of the page.

Answer 3

You need to specify a line-height. Try

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