@font-face rendering

Question

I'm using a font in my site: http://www.fontsquirrel.com/fonts/Bentham

But I have a problem:

This @font-face displayed font looks different in every supported browser. How could I mostly render it everywhere equally?

Answer 1

@font-face is, sadly, still new and relatively inconsistently supported. Webkit/Gecko deal with it differently, and IE8 only works with their EOT font files... it's a mess.

Right now, consistency is still achieved only through older techniques (flash replacement, image replacement, etc.).

If you have specific examples of what's different, though, we might be able to help identify tweaks to your CSS to smooth things out...

Answer 2

There's something wrong with the hinting in this font file. In Linux (which tends to ignore TTF hinting) it renders beautifully, but on Windows it seems to come out with extremely poor hinting and no ClearType, regardless of which browser is in use.

It even displays wrong in Notepad, so it's not a web-embedding problem as such.

I can't immediately see the cause... I thought adding a TTF ‘gasp’ table might fix it, but it seems not to help.