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

While waiting for a future version of jQuery, adding this before your script makes sure jQuery removes the filter attribute at the end of any opacity animation. (Via http://dev.jquery.com/ticket/6652)

This cleared the ugly fonts for me.

if ($.cssHooks.opacity.set) {
  $.cssHooks.opacity.defaultSet = $.cssHooks.opacity.set
  $.cssHooks.opacity.set = function(elem, value) {
    $.cssHooks.opacity.defaultSet(elem, value)
    if (!elem.style.filter.replace(/\ *(alpha\(opacity=100\))?/, ''))
      elem.style.removeAttribute('filter')
  }
}