Working arround font rendering issues in all major browsers

Question

Hello everybody.

Since long time i been having a real problem with the different ways that each browser display text.

Sure you have noticed that even when you create a stylesheet specifying everything about the font properties, still every browser display the same text with some differences, the usual problem is the font weight, that even if you specify it different browsers display it different ways.

I would like to know if some as come with a solution. Not turning the text into a image.

Thanks.

EDIT:

This is a example of the problem. On the left Firefox and right IE. However i have defined in the CSS font family, weight, size and still they render the fonts different.

Snapshot

Answer 1

You can use SIFR.

Answer 2

Do you mean that on one browser its bold and another one its normal? A reset should fix that, but if it doesn't, it might be something overriding that.

If you're talking about fonts looking different, it is possible - for example, since Google Chrome / Chromium sandboxes the renderer process, the font rendering won't be affected by other parts of the system, and I believe that it uses some sort of special font rendering. To be honest, on my Linux install, I do get bolder fonts on Chromium, but Firefox displays them fine.

There's SIFR (as pointed above), but it needs Flash and it is a bit heavy. There's also Cufon http://cufon.shoqolate.com/ that uses Javascript. Could you show a screencast so we know what's the problem? Thanks.

Answer 3

SIFR is a good solution, as long as you're only trying to control the appearance of small chunks of text (headings, design elements, etc.)

Beyond that, browsers are perfectly allowed to render text any way they want, and getting it pixel-perfect between browsers and operating systems is usually not even desirable for larger chunks of text. Users will have different accessibility settings and anti-aliasing settings which are tuned to the way they want to read text, and in general websites should try to respect that.

Answer 4

Although this problem is already about a week old, here is a solution that I found, that might be related:

http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/

If you're not using jQuery, try removing the filter attribute from the elements that are displaying non-Cleartype'd text and it should work, according to that blog post.