title: Using jQuery animate CSS opacity fade and @font-face gives Internet Explorer very ugly font rendering?
body: <p>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 text and content too (so it looks like the Flash file). The problem is, the font's look jagged and ugly in Internet Explorer.</p>
  
  <p>My CSS for the font face looks like this:</p>
  
  <pre><code>@font-face {
  font-family: 'SansumiRegular';
  src: url('../fonts/Sansumi-Bold.eot');
  src: local('Sansumi Regular'), local('Sansumi-Bold'), url('../fonts/Sansumi-Bold.ttf') format('truetype');}
  </code></pre>
  
  <p>...which is generated from: <a href="http://www.fontsquirrel.com/fontface/generator" rel="nofollow noreferrer">http://www.fontsquirrel.com/fontface/generator</a></p>
  
  <p>The jQuery for the fade in stuff is like this:</p>
  
  <pre><code>$('#site').css({opacity: '0.0'});
  ... preloads the images with jQuery, and at callback do fade...
  $('#site').animate({opacity: '1.0'}, 1000);
  </code></pre>
  
  <p>Basically, there is no way around the fact that I need to use that particular font (not standard web font) and I have to use some sort of fade technique for it to 'look like the Flash file'.</p>
  
  <p>This all looks great in Firefox, Safari, Chrome... But in IE it looks rubbish - all jagged and hardly unreadable. After looking around, I found this jQuery plugin that is meant to deal with ClearType issues in IE: <a href="http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/" rel="nofollow noreferrer">http://allcreatives.net/2009/12/05/jquery-plugin-ie-font-face-cleartype-fix/</a></p>
  
  <p>...but I have a feeling it's this fade in that's causing the problem with the fonts. Maybe it's the fact that IE doesn't really support the opacity CSS command? ...but it does fade in fine one all IEs?! I've even tried a relatively unknown technique of applying a opaque background color (like #FFFFFF) to the elements with the text in that fades, but this still doesn't seem to do anything.</p>
  
  <p>There must be away around this problem? Apart from this small font issue, the site is complete!</p>