Sam Trenholme's webpage
Support this website

IE8 @font-face bug


June 19 2011

Since @font-face is a relatively new tag, there are a few bugs with its implementation in browsers. I recently discovered that Webkit has an issue printing pages that use @font-face and discovered just yesterday that Internet Explorer 8 has a nasty bug with @font-face on a page that uses iframes. In particular:

  • If a page uses @font-face in its CSS to have a custom font
  • And the page has an iframe which uses the same font
  • Then IE8 will sometimes incorrectly render the font in the parent frame.
This particular bug does not manifest itself if Internet Explorer 9 is used in IE8 rendering mode; this bug is only visible when using the native IE8 client to render the page.

The workaround is to not have a custom font in the iframe when using IE8 (another workaround would be to have the custom font only in the iframe). Here is what the relevant HTML code in the iframe looks like:

<![if !(IE 8)]>
<link rel="stylesheet" type="text/css" href="custom_font.css">
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="no_custom_font.css">

I now have a list of low cost hosting providers; this lists every single hosting provider providing an account with root access for $24 a year or less that I know about.

To post a comment about an entry, send me an email and I may or may not post your comment (with or without editing)