font is not the same in Linux FF and in Windows FF

Question

Please check this screenshot!

alt text http://img267.imageshack.us/img267/1391/difference.png

This is the same page in Linux FF (on the left) and Windows FF (on the right, also it's displayed in the same way in IEs). I love how it looks in Linux FF and want to have the same look in Windows. However after playing with all CSS properties I know of, I didn't manage to change its look in Windows. Do you by chance know any solution for this issue?

Answer 1

Just in case: as a webdesigner you can't control pixel per pixel how your site will display on your user's browsers. Print and PDF are great for that purpose, not the web :)

Is Cleartype activated on Windows? This changes the display a lot and it's the user decision to activate or not this feature: if he doesn't like antialiasing you'd piss him off by forcing the rendering we can see on the left!

You can also change your stack of fonts in font-family and add other fonts than Arial.

Answer 2

You don't get to decide how the user's fonts look. The exact choice of font and whether it is anti-aliased is a client-side setting. Some (terrible luddites, IMO) prefer the pixellated look. In any case, Linux is likely to be using a lookalike fallback font (eg. 'Sans') rather than Arial itself, so it's never going to look exactly the same.

To turn anti-aliasing on in Windows for most fonts (in all applications, not just web browsers), you need to enable ClearType . Without ClearType, Windows's anti-aliasing is the old broken 'font smoothing' option, which for most fonts is so poor that Windows prefers not to use it. ClearType rendering isn't quite the same as the anti-aliasing Linux will be using; usually it only anti-aliases in the horizontal direction. So again it won't quite look the same, but it's generally considered pretty good at least for the Latin alphabet.

If you're really desperate to push it from the server side, you could use a @font-face rule to embed a font that has the GASP table hacked to always use anti-aliasing (using a ttfgasp.exe or a font editor). However doing this to Arial (or indeed most fonts without an open licence) would not be technically legal.

Answer 3

You can easily get the same look (or at least similar) by activating font smoothing in Windows. You can not, however, activate it using CSS.

Font smoothing is on by default in newer versions of Windows, so a lot of visitors will see it as you see it on your Linux system.

This is a user setting, and that is as it should be. Each user should be able to choose the smoothing setting that works best for him/her on his/her monitor.

If you absolutely want the text to look like on your Linux system for every user, your only option is to make it an image.

Answer 4

Different versions of Windows and Linux, and even different settings of their font rendering systems, yield different results in font rendering; in the first case antialiasing with subpixel optimizations for LCDs is clearly activated, while in the second case not even antialiasing is enabled.

To get nicer looking font rendering on Windows you should enable ClearType. In any case, it's all a client-side settings, and AFAIK you can't do anything for them from HTML - and you mustn't, if the user don't like antialiasing you shouldn't mess with his settings.