Question

How can I get fonts defined in data uris to appear in Internet Explorer 8?

Here's the background: I'm using the tinyMCE HTML editor in a web application, which is being used by several organisations, some of which are using IE which has been set not to allow font downloads. The icons in tinyMCE are implemented as a font, and therefore those people who can't download fonts can't see the icons. I'm trying to fix this issue by using the data uri scheme in the skin.min.css, so where it says

src:url('fonts/icomoon.eot')

I've changed it to say

src:url("data:application/vnd.ms-fontobject;base64,TCAAAK...DOJntO")

This works in IE 9, but it isn't working in IE 8. According to this wiki page data URIs should be allowed in IE8 if they're less than 32KB and appear where a url is expected in CSS. The font itself is 9KB.

UPDATE:

I've since discovered that data uris are not an adequate solution to the problem of IE being set not to allow font downloads even in version 9. With that setting, web fonts aren't used even if they are embedded within the stylesheet. This does make sense from a security point of view, because malicious code could as easily reside in an embedded base64 binary as a separate one. My thinking otherwise resulted from a mixture of wishful thinking, failure to clear the cache, and the fact that the IE security settings in my developer machine were also locked down. So I am going to edit the style sheet to use images instead.

Was it helpful?

Solution

Data URIs aren't supported for fonts in IE8, unfortunately. It's an issue I ran into when writing a font-face render check. The only solution is to load the EOT externally.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top