css - @font-face EOT not loading over HTTPS

Question

Summary

I'm running into an issue using @font-face over HTTPS in IE 7,8,9 - it simply is not loading. It does not matter whether the containing HTML page is hosted on HTTPS or not, when I try to load the EOT font over HTTP it works, HTTPS it doesn't. Has anyone seen this behavior?

The server hosting the font is sending the proper content-type="application/vnd.ms-fontobject"

I've tried multiple fonts, so it's not specific to the font.

The fonts were generated over at Font Squirrel

CSS Syntax

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

Sample Page

http://gregnettles.net/dev/font-face-test.html

Answer 1

I ran into this problem with HTTPS, but not HTTP. For some reason IE would continue through the different font options, ignoring 200 OK responses.

In my case, the problem was the HTTP header Cache-Control: no-cache for the font. While this will work fine with HTTP, over HTTPS it causes Internet Explorer to ignore the downloaded font.

My best guess is that it's a variation of this behaviour:

KB 815313 - Prevent caching when you download active documents over SSL (archive)

So, if you're seeing IE work through each font in the Developer Tools network view, it might be worth checking if you have a Cache-Control header and removing it.