IE8 Web Font Iframe Bug Workarounds

IE8 web font iframe bug workarounds

So, there is no performance hit with the following (as long as your CSS is reasonably sized), you get to leave the <link> tag in <head>, and it works without issue, but you are still basically 'reloading' your <link> elements (though you are not doing so by resetting their url).

On the removal of the <iframe> element, simply do the following:

var sheets = document.styleSheets;
for(var s = 0, slen = sheets.length; s < slen; s++) {
    sheets[s].disabled = true;
    sheets[s].disabled = false;
}

Reloading is all I can really think of as working since it seems to be removing it in garbage collection from the <iframe>. Set up a test page that obviously only works for IE 8.

Of Note: I was originally unable to reprodcue this issue using Google web fonts, and had to specifically download a .eot font for use for this. So your work around maybe to use WOFF fonts first, and only load EOT if necessary.

Not exactly sure if this is what you were looking for, but if it's not, please clarify and I'll edit as necessary.

Update 1: The cause

So, I've narrowed down the cause of the issue. I am only able to reproduce if the following occurs (and this is a nasty one folks).

And <iframe> is contained within a parent element
The parent element's class is changed
The class does not change the display of the element it is being applied to (or really, if it does not change the overall display on the <iframe> element)

And, from what I can tell, yes, it has to be the class name. I was unable to reproduce given the same steps on the id of an element. Seriously. This one is a nasty one. I'll keep digging a bit.

Update 2: A Secondary Cause

If the <iframe> is not fully in the browser window on draw, it will not load the font within the <iframe> window, and will unload the font for the main window whenever it has to redraw the page (most notably when it is resized). This is a gnarly bug.

Update 3: What should be a solution

Instead of using display: none;, set the height and the width of the element to be 0px and the overflow: hidden;, and you'll get the same effect as display none, but it will not remove it from the DOM, thereby not redrawing the page and taking your font. My test page from before has been updated, so you can see the effect on what used to be the bug.

IE 10, 11 iframe and fontface in external css

Well I believe its a bug in IE and the only workaround is to hardwire css in tag id iframe document's head.

Google Font (with a space on it) not rendering on IE7/IE8

I guess you have also found this one: http://code.google.com/p/googlefontdirectory/issues/detail?id=1

(there was a post today regarding to Francois One, I guess it was yours)

There is a solution that works for me(I see the font now in IE6-9)

The most common reason fonts don't load in IE is because the font name table was coded wrong by the font author. That is definitely the case with Josefin. The Family Name + the Style Name must = The Full Name. Josephine fails this.
FYI - fontsquirrel.com automatically corrects these problems in their webfonts.

This must be the reason, some wrong naming inside the original font which matters to IE

Downloaded the TTF from google
Uploaded the font at fontsquirrel.com and got my "@font-face-kit"
Uploaded the created .eot inside the Kit
Edited the css regarding to this bulletproof syntax

I changed only the URLs of the EOTs to my uploaded font, for the WOFF I still may use the google-font(But i guess it's better to use own files for every font, nobody knows how long the specific fonts will be reachable via the current URLs).

Also Note: the font-family-name to use inside the CSS has changed now to FrancoisOneRegular

http://jsfiddle.net/doktormolle/nLUgJ/

css3 not working inside an iframe of Internet Explorer

Try this:

Start your iframe html document this way:

<!DOCTYPE html>
<html>
<head>
(...)

This should force the browser to render in standards mode.

Page loses google web font & other css after closing fancybox 2 iframe in IE8 WinXP

I could find a resolution for this, tried everything that I could find.

A 'fix' if you could call it that was to change the type to 'ajax' for the banners on the links that didn't really need to be an iframe. The links that do need to be an iframe I had to resort to making the parent window refresh with the afterClose command for IE 7 & 8 only.

Cross-browser base64 webfonts support

Data URLs are not supported for Internet Explorer 7
More details on DataURL support

In this case, use conditional comments to serve non DataURL font to IE7 and lower:

<!--[if (lte IE 7)]>
    <link rel="stylesheet" media="screen" href="css/fontface-ielt8.css" />
<![endif]-->

Internet Explorer 8 has a DataURL size limit of 32KB

If your font doesn't show up in IE8, this may be the reason.

Then try to modify the font via fontsquirrel (expert mode) or another application to cut down the font size.

Hope this helps.

IE8 Web Font Iframe Bug Workarounds