@font-face EOT not loading over HTTPS

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

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

Solution 2:

I know this is an old thread but I just had to weigh in. We had the same issue with EOT and WOFF fonts in all versions of Internet Explorer (7-11) not loading over HTTPS. After hours of trial and error and comparing our headers with other working sites we found it was the vary header that was messing things up. Unsetting that header for those file types fixed our issue right away.

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

Bonus Reading

• Eric Lawrence: Vary with Care (archive)
• IE Blog: Caching Improvements in Internet Explorer 9 (archive)

Solution 3:

This usually happens due to following response headers while downloading the .woff or .eot files.

• Cache-Control = no-cache, no-store, max-age=0, must-revalidate
• Pragma = no-cache

In My case I am using spring-boot and to remove these header I had to do following . which solved the issue as well.

public class SecurityConfig extends WebSecurityConfigurerAdapter { 
@Override
public void configure(HttpSecurity http) throws Exception {
   http.headers().defaultsDisabled()
        .addHeaderWriter(new StaticHeadersWriter("Cache-Control"," no-cache,max-age=0, must-revalidate"))
        .addHeaderWriter(new StaticHeadersWriter("Expires","0"));
 }
}

Solution 4:

Here is my fix:

Using the URL Rewrite Addon for IIS to set Cache-Control header for all EOT files:

<system.webServer>
....
<rewrite>
  <outboundRules>
    <rule name="Fix IE9 missing font icons">
      <match serverVariable="RESPONSE_Cache_Control" pattern=".*" />
      <conditions>
          <add input="{REQUEST_URI}" pattern="\.eot.*" />
      </conditions>
      <action type="Rewrite" value="private, max-age=36000" />
    </rule>
  </outboundRules>
</rewrite>
</system.webServer>

Solution 5:

Without cache headers, I have noticed that IE9 clients on Windows Vista still do not load fonts (even though on my newer development machine IE11 in IE9 emulation mode does so).

I was able to fix the issue on the client machines, in the Internet Explorer, by going to:

• Internet Options
• Advanced
• Security

And unchecking the “Do not save encrypted pages to disk” option.

Bonus Reading

• Eric Lawrence: Avoid “Do not save encrypted pages to disk” (archive)

HTH