Using jQuery animate CSS opacity fade and @font-face gives Internet Explorer very ugly font rendering?

Question

I\'m working on a site with HTML/CSS/jQuery that is trying to act like a Flash site. I\'ve had to use @font-face to get the desired font to work. The client wants the fade in of

Answer 1

I had the same problem where the fonts look all jagged if I fade in the element. I tried setting the background and found out that it works if I set an opaque background (like #fff) AND set opacity to 0 using jQuery.css(). If I only set opacity to 0 in the stylesheet, it doesn't work. I used fadeTo instead of Animate.

This works in IE8 for me, I haven't tried IE7 though.

Try this in stylesheet:

.fader {
background: none repeat scroll 0 0 #fff;
opacity: 0;
}

And this in JS:

$('.fader').css('opacity', '0').fadeTo(300, 1);