Cross-browser base64 webfonts support

css, internet-explorer, internet-explorer-7, internet-explorer-8, stylesheet

Solution

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.

Problem

internet-explorer aborts the `EOT` file loading progress sometimes, so the font does not load correctly. There is a abstract solution with eotfast & mhtml, but it's not supported within IE7+8. The regular `base64` method works pretty nice, but for IE9 only: src: url('data:font/eot;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAggg=='); /* IE 9 */ What's the common solution, to implement inline opentype webfonts for internet-explorer7+internet-explorer8?

Original source