: Font-face loaded on Windows look really bad. Which fonts are you using that render better? EDIT: The problem was that I did not have "Cleartype" turned on in my settings on Vista. This question

@XinRu324

ttfautohint can be used to rebuild the font's hinting bytecode; the default settings (GDI-compatible) should help windows render the font.

Vote Up Vote Down

@Connie430

Use the below code in CSS

-webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004);


It might help you

Vote Up Vote Down

@Yeniel278

Turning ClearType on, on your Windows XP:

1) Follow this instructions: blogs.msdn.com/b/virtual_pc_guy/archive/2011/10/05/enabling-cleartype-on-windows-xp-mode.aspx
2) Now, follow this on your IExplorer: www.microsoft.com/typography/cleartype/tuner/step1.aspx

Vote Up Vote Down

@LarsenBagley460

This should be a comment (hence making this CW), but I think there are some misunderstandings and wrong assumptions in the question. Since you obviously want this question to be answered (you've offered a bounty after all), here's my two cents.

From your screenshot it seems to me that you have set your Windows to render fonts regularly (as opposed to subpixel rendering) and probably your browser doesn't do any antialiasing (it might, but then it is gone with JPG compression).

The following examples dealing with windows are from XP Pro SP 3, so it is quite safe to assume the situation is at least in the same level in Vista & 7.

Windows has (in XP) options to use ClearType or to not. Without ClearType the fonts render as in your screenshot. This is a heavily zoomed in image from Windows' dialog without CT:



You see it is a binary operation: pixel is black or transparent. Now with some modern browsers even without CT, they do some anti-aliasing. This is from css-tricks.com with Windows XP & Chrome 8 and CT is OFF (as it was in the previous picture):



See what has happened? Probably you did already, as you stated in your question.


NOTE: I am not talking about the antialiasing difference that there is between new browsers and old ones (like between IE9 and IE6).


Now, the ClearType!

Here is the exact same text from the Windows dialog, this time with CT:


If you're interested on what this is based on, see the Wikipedia article on subpixel rendering. And does turning the ClearType on affect the browser rendering? Same "other" text with Windows XP & Chrome 8 and ClearType is ON:


It does! And while we're at it, I might add that (at least) IE 8 uses ClearType rendering even if it is disabled in Windows-level.



Comparing antialiased and ClearTyped text in 100 % isn't as radical as comparing ClearTyped text to non-antialiased. It is noticeably bolder, though:

aa: CT:

To see what that looks like without antialiasing, just look at littlemad's screenshot.

And for comparison here's the same "other" in OS X's default rendering: even more bolder than ClearType.



To answer your question: any font. If your operating system renders the font differently it might be because you've set your operating system to render fonts so. OR it might be that your browser isn't capable of antialiasing or ClearType.

Another question would be that why some fonts render correctly and some don't — if this even is the case (but I don't see any problems on the site you've mentioned on Windows). Or are you asking for fonts that would look adequate without any rendering whatsoever?



And here's also answer to frequently asked question: "Yes, I know all that — why does ClearType look different than OS X's rendering?!"

Because they are different. Subpixel rendering isn't a light thing to implement. ClearType is Microsoft's registered trademark and it is protected with 10 patents (+ 1 pending; see wikipedia). They just can't be the same.

Vote Up Vote Down

@Odierno310

If the issue is the same as the Stackoverflow question you reference then isn't the answer the same too?


That's a Hinting problem.

When you generate your font-face kit (like in FontSquirrel), you need to specify Hinting on the Expert options.

Choose Expert, and under Rendering, select:

Apply Hinting - Improve Win rendering.

Vote Up Vote Down

@Berumen635

This doesn't have anything to do with the browser, but windows itself.

*nix systems (unix/linux, and OSX is included in this because it has a Unix base) have the option to finely control how text is displayed, and are generally set to subpixel rendering (which has a much more technical explanation than what I'm going to give you, but it essentially uses the subpixels (the red, green, and blue portions of your screen's pixels) to render the text) where Windows uses cleartype, which is it's own type of rendering that I'm a bit fuzzy on the mechanics.

Pretty much it's just that Windows doesn't subpixel render, it's not the fonts or files, but the operating system displaying those fonts and files.

Vote Up Vote Down