title: IE8 web font iframe bug workarounds
body: <p><a href="http://kenneth.kufluk.com/blog/2010/02/losing-face-with-ie8/" rel="noreferrer">This blog post</a> (slightly annoying page there) (and that's not my blog by the way) describes a bizarre bug I ran into yesterday in Internet Explorer 8 only.  The bug involves .EOT web fonts and <code>&lt;iframe&gt;</code> elements.</p>
  
  <p>I haven't extensively researched the exact trigger for the bug, but it's basically the case that a page using a web font that loads content into an <code>&lt;iframe&gt;</code> such that the frame <em>also</em> uses a web font becomes "defaced" by the browser. The previously-OK text rendered with the web font suddenly shifts to awful-looking Arial or something else, sort-of on its own. Sometimes it flips back, only to degrade again on random user interactions like mouse moves.</p>
  
  <p>That blog post has an example. To clarify, it's the containing page that gets messed up, not the page in the <code>&lt;iframe&gt;</code> (at least, that's the case so far in my experience).</p>
  
  <p>Has anybody found a better workaround than what's suggested in that blog, which is to force a "reload" of the CSS <code>&lt;link&gt;</code> element from whence the <code>@font-face</code> declarations come?  (I could do that but it'd be a minor pain, plus it would force me to move my font setup out of my document <code>&lt;head&gt;</code> which if I recall is a performance issue; I'll have to scrounge around and find that tidbit again.)</p>
  
  <p><em>edit</em> &mdash; <strong>update</strong></p>
  
  <p>OK <a href="http://gutfullofbeer.net/ie8/index.html" rel="noreferrer">here's a test page</a>.  Here's the main (container) page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style id='font_style'&gt;
        @font-face {
          font-family: 'bold-display';
          src: url('DejaVuSans-Bold.eot');
        }
      &lt;/style&gt;
      &lt;style&gt;
        .fancy { font-family: bold-display, "franklin gothic medium", "verdana", sans-serif; font-size: 32px; }
        iframe { width: 500px; height: 200px; }
        #floater {
          position: absolute;
          top: 100px; left: 100px;
          display: none;
        }
        #floater.showing {
          display: block;
        }
      &lt;/style&gt;
      &lt;script&gt;
        function load() {
          var frame = document.createElement('iframe'),
            floater = document.getElementById('floater'),
            target = document.getElementById('target');
  
          frame.src = 'frame.html';
          target.appendChild(frame);
          floater.className += 'showing';
        }
        function unload() {
          var floater = document.getElementById('floater'),
            target = document.getElementById('target');
          target.innerHTML = '';
          floater.className = floater.className.replace(/\bshowing\b/g, '');
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class='fancy'&gt;Hello World&lt;/div&gt;
      &lt;button type='button' onclick='load()'&gt;Click Me&lt;/button&gt;
      &lt;div id='floater'&gt;
        &lt;div id='target'&gt;&lt;/div&gt;
        &lt;button type='button' onclick='unload()'&gt;Close&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The frame page has the same <code>@font-face</code> and a dummy message.</p>
  
  <p>The problem appears to have something to do with <em>using</em> the loaded fonts with a list of more than one alternate font.  I (for no good reason) had tossed in a couple of similar more-common fonts in my "font-family" values.  When I dropped them back to:</p>
  
  <pre><code> .title { font-family: bold-display, sans-serif; }
  </code></pre>
  
  <p>then the problem went away (or at least it seems to have gone away so far).</p>
  
  <p>Thanks to those who've helped out. To @albert, add an answer summarizing what you tried and I'll upvote you :-)</p>