Question

I’ve seen similar questions asked before but haven’t found a definitive answer.

The client wants to use a specific font for headings because it is part of their logo. They’re fine with system fonts for body copy. The custom font is rendering really hideously in Windows (no anti-aliasing). I’ve read a lot about this issue, and I understand that it has to do with the way Windows renders type, and the solution always seems to be “just use a better font” — one optimized for screen with better hinting, blah blah blah…

But I’m trying to figure out if there’s a way to continue to use the custom font for everybody else but serve system fonts to Windows viewers. Is there a CSS equivalent of conditional comments (such as <!--[if lt IE 7 ]-->) that I could use to designate different font stacks for Windows?

I understand that the cleanest solution would be to just to use fonts that work well for everybody, but that’s not an option for this project.

Edited to add: Font in question is Ruda: http://www.google.com/webfonts/specimen/Ruda

Answer 1

You can use javascript to detect the OS and then replace the class of the header elements with a class that uses a system font. Here is a good tutorial for browser detection:

http://www.quirksmode.org/js/detect.html