Now, the real deal is this: I’ve found that having more than two fonts listed in the “font-family” property setting where the web font is actually *used* is necessary to trigger the bug. In other words, “font-famly: your-font, sans-serif;” works fine, while “font-family: your-font, Arial, sans-serif;” does not.

Also it’s been suggested in an answer to a Stackoverflow question on the topic that simply disabling and re-enabling the style element suffices to “reload” the font-face declarations. However, that’s moot for me because dropping the font-family list down to two seems to do the trick (for me).

If you’ve got a better test case, I’d run it past the guys from MS to see if they can see what’s really happening under the covers.

Is it still an issue in IE9?

I’m running into the a very similar issue. I’m dynamically adding @font-face rules to an iframe, and every time another @font-face is added, the fonts in the parent frame show up either as the newly loaded font, or as a weirdly-spaced version of the original font.

I can’t figure out a better solution other than forcing a repaint, but you still see a flash of weird fonts in the parent frame, which is still pretty unacceptable.