css - @Font-Face won't load via https in IE

Question

EDIT 23-06-2012 10:24 (CET): Found the answer

Take a look at the bottom answer. That is what fixed the issue for me. IE9 is rendering the right way now. IE8 has a slightely different font. Not sure what font, but it looks "OK".

Original Question:

I've been struggling with this for several hours now. For one of our customers we've designed a webshop and been developing this over a normale unsecure http connection. Since 2 days ago, we've installed an SSL certificate on the domain and forced every connection with the website to go over the https domain using .htaccess

But, for some reason, IE (no version) renders the font we've specified in the CSS using @Font-Face. Here's on of the codes we are using for the fonts:

@font-face {
    font-family: 'ProximaNovaLight';
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot');
    src: url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.woff') format('woff'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.ttf') format('truetype'),
         url('https://www.bijouterieyvette.com/font-face/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

As you can see I'm using the full link to the fonts including the https. I've tried moving the files to the root of the domain to match the SSL certificates domain. I also tried to use relative paths from within the CSS but also this didn't work.

All fonts are on the domain, none of them are cross-domain.

I came across 2 other posts here on SO describing similar problems, one of the wasn't solved, the other one was, but it didn't seem to be the same problem. In this case the author of the question had to add Access-Control-Allow-Origin headers to the file requests of woff/ttf/otf/svg. I've also added these headers to my .htaccess just to be sure:

<FilesMatch ".(woff|ttf|otf|svg)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

I'm kind of running out of options and thoughs. I'm no server-configuration-type-of-guy, but more into PHP/MySQL/jQuery so I guess my thoughts are rather limited compared to others here on SO.

If anyone has an option which is worth trying, just let me know!

UPDATE 22-06-2012:

If I change the https to http and refresh the page in IE, I am being prompted with the message that there is non-secure content and I have the option to accept this content. If I choose 'YES' my content is being loaded and... the font is available!! Yay.. However.. if I change it back to https the fonts disappear again.

Not sure what I can learn from this (lol), but maybe this gives anyone a little idea..

UPDATE 22-06-2012 #2:

Thus far I have tried:

url('//protocol/relative/font.eot'); url('../file/relative/font.eot'); url('/domain/relative/font.eot'); url('https://www.secure.tld/font.eot'); url('http://www.normal.tld/font.eot'); (works but with a popup "Containing non secure items in IE)

I also tried to create a rewriterule forcing the FilesMatch (woff, ttf, otf, eot, svg) to a http:// connection. That didn't work as I thought and I haven't got a clue wether it did anything at all..

I also added this:

AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz

To the folder containing the fonts (in an .htaccess files ofcourse) aswell as in the main .htaccess file.

Besides that I tried to remove the htpasswd login, it was a wild guess, but didn't change a thing either.

UPDATE 23-06-2012:

Checked the DirectAdmin server logs.. apparently IE is requesting the fonts (I see an eot file with the questionmark, I'm guessing this is the eot with iefix and woff being requested). Everything that's requested is also getting a 200 OK header response, which isn't making things more clear for me..

Still looking and searching for what could cause this problem..

Also, based on the "F12 Console Log"-thingy in IE. I can clearly see that the fonts are being requested -over https- with a 200 OK response. Strange thing is I only see 3 out of the 4 fonts I'm using, but possible the 4th isn't being used on the mainpage.

Answer 1

I had exactly the same behaviour with IE and https. IE tried to load 3 of the 4 fonts but as soon as the server delivered the resource, IE broke up and moved to the next font. Finally no font was loaded and the site looked crappy. In my case the http header "pragma=no-cache" was the thing that confused IE. After removing it from the response, everything worked smoothly. See also my blog entry which explains the trick with Wildfly and Undertow: Blog

UPDATE:

In the meantime I opened a bug at microsoft connect: https://connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma-no-cache

If you want them to fix the problem, please vote for the bug.