Font-awesome: IE and Cache-Control

[chandon]

I had some issue with FA not displayed on IE11
After investigating, it was because my web server forced "no-store" in Cache-control header (perhaps avoiding some .eot #iefix reloading ?)

Perhaps it should be noticed here : https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

[tagliala]

@chandon feel free to edit that wiki and point to this issue, thanks!

leaving this open

[chandon]

Done in the "I'm hosting fonts on my server and icons don't show up" section

[tagliala]

Perfect, thanks! :+1:

[hailhash]

Removing global "Pragma: no-cache" on HTTP server header fixes this issue.

[tagliala]

@hailhash

https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#im-hosting-fonts-on-my-server-and-icons-dont-show-up

For Internet Explorer and HTTPS: you don't serve files with no-cache option in Pragma header.

[Rahul-Bisht]

setting [Cache-Control:'no-store'] worked for me.

[haripalpatil]

@Rahul-Bisht how and where did you set [Cache-control:'no-store'] to FA work in IE, can you please provide further detail. I am getting same issue on IE 11.

[tagliala]

@haripalpatil cache control is a parameter to set on the webserver and/or response headers and it is not a Font Awesome setting.

You should remove Cache-control: no-store as well as Pragma: no-cache

Ref:

• https://stackoverflow.com/questions/4480304/how-to-set-http-headers-for-cache-control
• https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#im-hosting-fonts-on-my-server-and-icons-dont-show-up

[haripalpatil]

@haripalpatil cache control is a parameter to set on the webserver and/or response headers and it is not a Font Awesome setting.

You should remove Cache-control: no-store as well as Pragma: no-cache

Ref:

• https://stackoverflow.com/questions/4480304/how-to-set-http-headers-for-cache-control
• https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#im-hosting-fonts-on-my-server-and-icons-dont-show-up

@tagliala Thanks for your quick reply, the response I am getting from server does not contain either of these value in response header (i.e. Cache-controlL no-store as well as Pragma: no-cache) so no need to remove, still IE 11 on my machine not able to download the font file.

If I use Charles to debug the font awesome GET call, I am getting error as "Client closed connection before receiving entire response"

Also while debugging Charles I found out that if I remove following from response header, I am able to download font file.
Vary: Origin

Also all this work fine if I user latest IE version.

[ahadik]

We recently had this issue serving Font Awesome font files from our Rails application. The confusion was that we weren't passing Pragma or Cache-control response headers - so the previous answers in this post were a bit confusing.

To summarize - this issue is caused by these two conditions:

1. The request is being initiated from font-face, over an HTTPS connection (critical for re-producing this bug locally).
2. The Pragma header has the value no-cache OR in our case, we're serving everything gzipped, and the Vary header is passed with a value other than Accept-Encoding.

We fixed this by adding the following to our Rack::CORS config:

config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'

        # Setting Vary to Accept-Encoding required or IE11 fonts will not load from local cache
        resource('*.eot',
                 headers: :any,
                 credentials: false,
                 methods: [:get],
                 vary: ['Accept-Encoding'])
      end
    end

@haripalpatil this might be of use to you.

[tagliala]

@ahadik thanks for sharing.

Feel free to edit our wiki at https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#im-hosting-fonts-on-my-server-and-icons-dont-show-up

[zikuai]

I had the same problem ,resolve by remove Cache-control: no-store and Pragma: no-cache