webfonts.fonts.com @font-face support in IE9 (updated)

Discovered an oddity of IE9's Webfont support today, on our site for The Kings Fund.

The problem surrounds the principal of Embedding Permissions set in all font files by their makers, which determines whether a font is allowed to be embedded on third party systems or not. If you're using @font-face declarations to serve up font files from your own server, you'll need to configure Apache/et al to serve up the font files with the Access-Control-Allow-Origin "*" header, which allows embedding on third party systems - or in other words, the browser on which your website is being viewed.

Stackoverflow and HTML5Boilerplate to the partial rescue. They provided explanation and solutions which work fine if you're serving your own font files, but not if you're using a third party providers for fonts which aren't freely distributed, such as webfonts.fonts.com.

In this particular case, we were using fonts from wefonts.fonts.com and had installed the fonts we'd purchased using their non-js, css-based method which amounts to nothing more than a <link rel="stylesheet"> pointing to their server, which is preferable to the with-js version for obvious reasons. However it seems IE9 didn't like this despite the correct headers having been set by fonts.com.

The error in the IE9 console is:

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.

Nothing I did seemed to remedy this, so I resorted to the with-js installation method, which works fine.

If anyone knows what the problem is here and whether I can fix it, any input appreciated.

Update

fonts.com got in contact and explained what to do. They had made recent changes to their serving methods and It appears I needed to force a flush of the cached stylesheets they were serving. This was done simply by logging into my account, saving my changes without actually doing anything (as if I'd made a change to the selectors or fonts I was using) then refreshing the page I was using it on.

The webfont team there seems to be on the ball, particularly as they managed to find this relatively obscure blog! Cheers, Monotype.

Comments

We pushed out some new code this week. Are you still seeing an issue with this? If so, please send details to webfontssupport@fonts.com and we will be glad to help troubleshoot

Still no dice i'm afraid guys, i'll drop you an email

Any update on this? Embedding fonts from Fonts.js still doesn't work in IE9. Odd that it works in IE7 though.

IE 9 doesn't support Fonts.js. It's a known issue, I believe they are working on it. Until then, add this to your .htacess file to force IE9 to emulate IE8. It's a "hack-fix" but it works until we find something better.

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support

Hi Brandy, what type of .htaccess I have to do? Do you have some link or example wich I can take a look?

Thank you so much!

Hi
I have the same error in ie9 console, has this problem been fixed?
thanks

Same problem. I found a discussion an .htaccess solution : http://stackoverflow.com/questions/5065362/ie9-blocks-download-of-cross-...
But still don't work for me, may be you will have more chance. I ll emulate to IE8...

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.