The Mystery of Non-Rendering Font on IE

2017-11-22 | #css, #server, #solution, #webdev

This one took me roughly two working days to figure out and plainly falls in the category of "what the fuck IE".

For a bigger website project we built an iconfont, which provided icons for functions such as search and shopping cart in a header. This header could be included in other pages, so that pages not being part of the CMS, such as separately developed tools could appear as if being part of Typo3.

So we made the header embeddable by offering calls to get the markup as well as separate calls for CSS and JS. All went smoothly in development, but when we deployed on staging: bam, icons are gone on IE! What the?

Having a look at the network provided nothing out of the ordinary, the request and responses looked exactly alike on dev and staging. So what the hell was going on? The fonts got requested, the request returned a 200, all headers are in order and you could even have a look at loading performance and trace the font in the browser styles. I just would not show.

oO

After lots of fiddling around I narrowed the problem to the only difference between dev and staging combined with the only change to the font we made:

Staging was running in https, while dev was http. And we included a CORS header to fonts, to allow dev versions of the tools to embed staging headers instead of having to run a second dev environment. If there is a problem with fonts and CORS in IE I could get my head around, we are talking about the Internet Explorer here, but on staging there are no cross site requests, those happen in dev where we have no problems.

Now get ready for the strange part: If a font has an Allow Origin Header (it does not matter if the request is actually cross site) and the protocol is https you may NOT set certain headers, especially Cache-Control. Because reasons.

The result, for example, of a font request with SSL having Allow-Origin: * and Cache-Control: no-store is, that IE requests the font, but simply does not apply it, without any error or trace of something not working. Holy cow, that's weird.

This is the htaccess Apache-snippet we used to circumvent this "feature":

<IfModule mod_headers.c>

<FilesMatch "\.(eot|otf|tt[cf]|woff2?)(?[0-9a-zA-Z]+)?$">

Header set Access-Control-Allow-Origin "*"

# IE has problems with CORS fonts over https, this seemingly fixes this

# https://stackoverflow.com/questions/7748140/font-face-eot-not-loading-over-https

Header unset Vary

Header unset Cache-Control

Header unset no-store

</FilesMatch>

</IfModule>