Font-face not loading in IE8 and IE9 when accessin

I'm using a webfont for my website (made with Spring for an Apache Tomcat 6 server). I'm including my font in my css file with font-face as:

@font-face{
  font-family:'FontAwesome';
  src:url('fonts/fontawesome-webfont.eot?v=3.0.1');
  src:url('fonts/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
  url('fonts/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('fonts/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight:normal;
  font-style:normal }

This css is called in a "layout.jsp" file which is called by all the rest of jsp pages, with the following:

 <link href="<c:url value='/styles/font-awesome.min.css'/>" rel="stylesheet" type="text/css"/>

This is working for every browser when I access my website internally via http:///webSite

However, we have also an Apache server which is serving the website via SSL (using a secure certificate) in the URL https:/// which redirects to the previous URL. When using the SSL-https config the web is working well in every browser, but the font is not loading in IE8, nor in IE9.

This is: - via http: fonts are loading well in every browser, including IE8 and IE9 - via https: fonts are loading well in every browser, but IE8 and IE9

The font is accessible from the browser at anytime. This is, if I write the path to the file, I can download it without problems. What is more, under Developer Tools of explorer, at Network tab I can see that the font is correctly downloaded (status: 200).

I've tried to include my font completelly in my CSS using its byte64 codification, instead of the path to the file with the generator of fontSquirrel:

@font-face {
    font-family: 'fontawesomeregular';
    src: url('fonts/fontawesome-webfont.eot');
    }

@font-face {
    font-family: 'fontawesomeregular';
    src: url(data:application/x-font-woff;charset=utf-8;base64,[BYTE64_STRING]) format('woff'),
         url('fonts/fontawesome-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

Doing this, the font is loading well in IE9, but not in IE8. At first, I thought it could be caused by the limitation of 32Kb at URLs. So, I reduced the charset of the font to reduce its size to about 20kb, and still no luck in IE8.

Any help?

回答1:

I was running into exactly the same problem and finally fixed it today. I noticed a particular web font was working in IE8/9 on one HTTPS domain, but not on another. The server for the domain that didn't work was sending the following HTTP response header for the .eot request:

Cache-Control: no-cache

When this header was removed the fonts were working in IE8/9 again. I hope this helps you as well.

回答2:

The practical answer is,using a proxy, to hide to the browser any cache-invalidating headers. Like "cache-control" and pragma: "no-cache" headers returned to the browser.

I used nginx like this, adding the folowing commands the https proxied location:

  proxy_hide_header Cache-Control;
  proxy_hide_header Pragma;

See here for details with nginx.

Using apache httpd, you'll find the syntax here