@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.

Answer 1

Definitely having the same problem. A combination of IE (in our case version 11/Trident 7) Bug occurs when all condition meet:

HTTPS, no-cache header

On certain domains that are administered separately, this is not a easy problem to workaround

Answer 2

You may get it to work using the Webfont-Loader, developed by Google and Typkit:

It add some overhead, but gives you also more control over font-loading (like classes that allow you to set different styles while fonts haven't yet loaded). Perhaps it is worth a try, setup for your own css seems to be simple.

Answer 3

Don't set the Vary Request Header to https

No font loading

Vary:Accept-Encoding,https

Works

Vary:Accept-Encoding

Same answer here.

Answer 4

So, I just figured out a way that is working for IE, Safara, Firefox and Chrome as far as I can see.

Since all the things I tried did not work out, I was trying to find a way that could "embed" the fonts eitherway to my websites, to my CSS or to my server. Added the font to my server wasn't an option according to my server-guy so I decided to get back to Font-Squirrel and see if there was an option they offered in converting the fonts.

I reuploaded my fonts en chose the export mode. Somewhere around the bottom of the settings fields it says "Base64 Encode", luckily I knew what this meant (I can imagine someone who doesn't easily looks over this option) so I genereted my CSS files with base64 embdedded fonts.

This works flawlessly. Ofcourse this made my CSS files some kb's bigger (5kb vs 129kb). But I don't see a big adventage of 100kb extra with the current internet connections.

Just to compare, non base64 encoded CSS:

@font-face {
    font-family: 'ProximaNovaSemibolds';
    src: url('../font-face/proximanova-semibold-webfont.eot');
    src: url('../font-face/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font-face/proximanova-semibold-webfont.woff') format('woff'),
         url('../font-face/proximanova-semibold-webfont.ttf') format('truetype'),
         url('../font-face/proximanova-semibold-webfont.svg#ProximaNovaSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Base64 encoded CSS:

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('proximanova-bold-webfont-webfont.eot');
    }

@font-face {
    font-family: 'ProximaNovaBold';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF+8ABMAAAAArzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcYT+YZ0dERUYAAAHEAAAALQAAADIC+wHsR1BPUwAAAfQAAAf7AAAURoqljoZHU1VCAAAJ8AAAACAAAAAgbJF0j09TLzIAAAoQAAAAWwAAAGB+FsNBY21hcAAACmwAAAGdAAAB+uY47ZljdnQgAAAMDAAAADoAAAA..alotmorecharacters...FDmYlYoTkE8HdsTFF2cwU74AAU/lecUAAA==) format('woff'),
         url('proximanova-bold-webfont-webfont.ttf') format('truetype'),
         url('proximanova-bold-webfont-webfont.svg#ProximaNovaBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Answer 5

Working solution for Apache/2.2.15 is to add .htaccess Its prevents caching font files even for https

<FilesMatch "\.(woff)$">
    Header unset Cache-control
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Cache-control
</FilesMatch>

Answer 6

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.