Internet Explorer does a pretty lousy job of displaying fonts anyway, especially fonts from all those new we font websites such as TypeKit (who I strongly recommend). But when you use, say, jQuery’s fadeIn() effect like this
$(".fadeThisGuy").fadeIn();
… type looks like crap all the way through the animation, and stays that way after.
The reason for this is a bad implementation of “filters” in IE. “What are filters” you ask? Well while the rest of the web was being standardized to make our lives easier, Microsoft was ignoring the new standards and making up their own, worse looking and harder to write versions. jQuery hides all that from us by turning your fadeIn() into the appropriate filter code in IE, or opacity code in everything else.
There are 3 fixes.
1) Avoid the problem. That means using a non-typekit font, or using an image of the type (which means it won’t be selectable, and google can’t see it).
2) Partial fix: At the end of your fadeIn() you can tell IE to drop all filters from the element. This isn’t great because it means that the type will still look like crap all the way through the animation, and then snap to normal looking (which is still not great in IE) at the end. Code for that below:
$(".fadeThisGuy").fadeIn(400, function() {
$(this).css('filter', "");
});
3) “Graceful degradation”. The buzzword “graceful degradation,” refers to the act of checking the capabilities of your visitor’s browser, and scaling your awesomeness back to fit what their browser can do. They should still get the same website, just without the bells and whistles their browser can’t handle.
In this case, we’re checking for IE, and whether it’s version is < 9.
if ($.browser.msie && parseInt($.browser.version) < 9) {
// dumb it down for old IE 6, 7, and 8
} else {
// regular awesomeness for people who know how to use Windows Update
}
As an alternative to a fadeIn() and fadeOut() I’d suggest either a simple show() and hide(), or any of the other jQuery Effects that don’t have to do with opacity/filters. You can find a list of jQuery effects here in the effects section.