Home/ Questions/Q 6384271
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:45:20+00:00

When working on my website www.monkey-touch.com I started using a custom font for the

  • 0

When working on my website http://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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0