Font Awesome With HTTPS

Question

So I'm experiencing an issue with Font Awesome in IE8 when using HTTPS in my own site and this is even reproducible on Font Awesome's own site. If I go to Font Awesome over HTTPS in IE8 I get boxes for all of the icons however if I go to Font Awesome over HTTP I get the icons rendered correctly.

What is the problem here? I've heard it could be something to do with the relative font paths in Font Awesome over HTTPS but not sure about that.

Here is a screenshot for those who like such things: enter image description here

Update

So here is the code that references the fonts and loads the CSS. I'm going to use the code from Font Awesome's site since this seems to be an issue with Font Awesome and not necessarily something with my site:

HTML that references CSS and an icon:

<link rel="stylesheet" href="../assets/css/site.css">
<link rel="stylesheet" href="../assets/css/pygments.css">
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.css">
...
<div class="fa-hover col-md-3 col-sm-4">
   <a href="../icon/adjust"><i class="fa fa-adjust"></i> fa-adjust</a>
</div>

Within in font-awesome.css:

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

Can you show the part of your code that loads the fonts? Are you using a CDN or loading it locally from your server? Are you using relative paths or absolute paths? Many factors can result in loading the page content from mixture of HTTP and HTTPS sources and resulting in what you get in IE8 when the main page is loading over HTTPS. — Arbel, Mar 26 '14 at 18:46
Updated. Let me know if you need more but you should also be able to to go to Font Awesome's site and look at their source. Thanks! — Ian Dallas, Mar 26 '14 at 20:37
So another data point. If instead of using a relative URL in the @font-face sections I use a hardcoded path to http:// than HTTPS loads the fonts just fine (although with an IE error about loading insecure content) but if I hard code to HTTPS then the fonts do not load. There seems to be some issue with requesting .eot files over HTTPS or at least in the way I am doing it. — Ian Dallas, Mar 26 '14 at 22:42
I have the same issue, the icon font does not show in IE8 via HTTPS. @tkeE2036, Do you have any update about this issue? — Ricky Jiao, Sep 29 '14 at 04:23
The problem was the Pragma: no-cache that was being sent across when the fonts are retrieved. Remove this from the response (for the endpoint that was serving up the font awesome fonts) and it should fix the issue. — Ian Dallas, Jan 06 '15 at 00:21

score 3 · Accepted Answer · answered Mar 27 '14 at 16:23

3

I've determined the issue and will post the answer in case anyone else experiences the same issue. The problem was with the HTTP cache headers we were sending along with the font file. Apparently this causes IE8 over HTTPS to not load the fonts for some reason (if anyone knows the true reason please comment below). The successful headers should look like this:

HTTP/1.1 200 OK
Content-Type: application/vnd.ms-fontobject
Date: Wed, 26 Mar 2014 23:57:04 GMT
ETag: "08b27bc96115c2d24350f0d09e6a9433f"
Last-Modified: Wed, 26 Mar 2014 12:10:02 GMT
Server: Apache-Coyote/1.1
Content-Length: 38205
Connection: keep-alive

but instead were being sent like this:

HTTP/1.1 200 OK
**Cache-Control: max-age=31556926, must-revalidate
Content-Type: application/vnd.ms-fontobject
Date: Wed, 26 Mar 2014 23:58:06 GMT
ETag: "08b27bc96115c2d24350f0d09e6a9433f"
**Expires: Fri, 27 Mar 2015 05:46:52 GMT
Last-Modified: Wed, 26 Mar 2014 12:12:12 GMT
**Pragma: no-cache
Server: Apache-Coyote/1.1
**Set-Cookie: JSESSIONID=844B0798B373A3B8ED54A694C9DFB5C5; Path=/; Secure; HttpOnly
Content-Length: 38205
Connection: keep-alive

answered Mar 27 '14 at 16:23

Ian Dallas

12,451
19
58
82

Just for anyone running across this issue. It wasn't the Cache-Control header. If this is set to no-cache it causes issue. I suspect the real issue was with the `Pragma: no-cache`. – Ian Dallas Mar 28 '14 at 20:55
any solution for this problem? – Emanuele Parisio Sep 19 '14 at 08:01
I have the same issue, I google the issue, but no solution. Any idea is welcome! – Ricky Jiao Sep 28 '14 at 06:22
Yes, seeing the same problem on my https site. – Jens Jan 05 '15 at 18:36
1

Here is the bug on IE: https://connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma-no-cache – t1gor Sep 17 '15 at 11:05

score 2 · Answer 2 · answered May 15 '15 at 12:32

This happens in IE only with https.

Remove any HTTP headers from the fontawesome relevant files that prevent caching, e.g.

Expires -1
Pragma: no-cache

After removing the cache control for these files you should see your icons. After reloading your page all the relevant fontawesome files should show HTTP code 304, i.e. the file comes from the browsers cache.

score 0 · Answer 3 · answered Mar 26 '14 at 18:33

0

i think the same,

something to do with the relative font paths in Font Awesome over HTTPS

answered Mar 26 '14 at 18:33

eventHandler

1,088
12
20

score 0 · Answer 4 · answered Feb 19 '16 at 10:25

add NoCacheHeaderFilter in web.xml and provide the exclude file paths.

<filter>
    <filter-name>NoCacheHeaderFilter</filter-name>
    <filter-class>NoCacheHeaderFilter</filter-class>
    <init-param>
        <param-name>exclude</param-name>
        <param-value>^/(image|css|js|fonts|lib|partials)/.*</param-value>
    </init-param>
</filter>

add filter like this.

    if (null != exclude) {
        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;

        String context = httpRequest.getContextPath();
        String path = httpRequest.getRequestURI().substring(context.length());
        if (!exclude.matcher(path).matches()) {
            httpResponse.setHeader("Pragma", "no-cache");
            httpResponse.setHeader("Cache-Control", "private, max-age=0, no-store, no-cache");
            httpResponse.setDateHeader("Expires", System.currentTimeMillis());
        }
    }

    chain.doFilter(request, response);

score 0 · Answer 5 · edited May 23 '17 at 11:54

0

The practical answer is,using a proxy, to hide to the browser any cache-control and pragma: "no-cache" header 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.

edited May 23 '17 at 11:54

Community

1
1

answered Mar 29 '17 at 12:46

user1767316

3,276
3
37
46

Font Awesome With HTTPS

5 Answers5