@font-face not working with Internet Explorer and HTTP-Header Pragma=no-cache


We recently spent a whole day trying to fix an Internet Explorer related bug. If you got the same problem you can find our solution here.

Our phenomenon

We included a special font with the css property @font-face. That worked quite well for all browsers. Until we used SSL for HTTP encryption. IE could not load the fonts anymore. By examining the HTTPS traffic with Fiddler we finally found out that the HTTP header “pragma=no-cache” did the difference. So if you want to user @font-face and deliver your site with HTTPS you must never ever set the HTTP header “pragma=no-cache”. As soon as we got rid of this HTTP header, IE behaved the way it did before.

I created a test site to reproduce the problem: https://font-face.korbball-ruswil.ch/

Edit 2014-10-04:

There are others who report that the headers “Vary” or “Cache-Control=no-cache” confused IE.

How we fixed the problem

In our case we use following stack:

  • Wildfly 8.1 as application server
  • Undertow 1.1 as web server
  • BASIC authentication

Unfortunately Undertow 1.1 introduced the feature to disable caching for secured resources (commit). Since then all resources are delivered with pragma=no-cache which are secured with BASIC authentication. So since we updated to Undertow 1.1 IE did not work properly anymore. The only way to fix it was not to secure the fonts. We could not find any way to overrule the new default behaviour of Undertow 1.1.

Still upset about IE

We are still upset about the behaviour of the Internet Explorer! Why on earth do they always manage to screw things up like that? If you watch the communication between IE and your server you see following:

  1. IE requests the font from the server.
  2. As soon as the server starts delivering the resource, IE closes the connection. Probably because it suddenly detects that it should get the resource from cache.
  3. This behaviour apparently destroys the cache content. So IE can’t access the font.
  4. IE tries to retrieve the next declared font but with the same wrong pattern.
  5. At the end it all leads to no font and a messy web site.

It is definitely a bug in Internet Explorer. Secured content should not be cached. But IE just can’t cope with it. We therefore filed a bug at IE Developer Cannel: https://connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma-no-cache. We’re curious if this is going to be fixed…

Edit 2015-04-21:

Sorry for the bad news. They didn’t fix it. They just changed status to “Won’t fix” and “Closed”. Although there are other people reporting the same issue.

Advertisements