@font-face issue in IE8 after using modal window

Question

I am using @font-face on a site I am working on, and all is working perfectly cross-browser until I use a modal window to display an iframe.

When a link is clicked within the iframe or a form is submitted, Internet Explorer 8 looses the @font-face styling and reverts to Arial. This problem also occurs if a modal window is opened with an iframe, then closed again, and then the user highlights text. As soon as the text is highlighted, it looses its font styling.

Has anyone else had this problem before or found a way around this?

Answer 1

I've found this issue too. I've done some work on trying to reproduce, and found it's extremely variable. Sometimes it will happen, sometimes not.

See my full post here: http://kenneth.kufluk.com/blog/2010/02/losing-face-with-ie8/

Things to try:

1. Check your doctypes match
2. Remove all fallback fonts (bit harsh, but seemed to work)
3. Use javascript to reload the stylesheet after the window closes