On IE CSS font-face works only when navigating thr

Question

Our webdesigner has created a CSS with the following font-face:

@font-face {
    font-family: 'oxygenregular';
    src: url('oxygen-regular-webfont.eot');
    src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('oxygen-regular-webfont.woff') format('woff'),
         url('oxygen-regular-webfont.ttf') format('truetype'),
         url('oxygen-regular-webfont.svg#oxygenregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

It works fine on IE and Firefix. But there is an issue: on IE the fonts are rendered correctly only when I navigate the page using inner web page links. If I hit Refresh or Back button, the fonts are replaced by default font (Times New Roman).

Currently the website is using HTTPS but the same problem was observed when using HTTP.

When I navigate using inner website links, in the Network tab of IE Developer tools (Shift - F12), I see the following:

/Content/oxygen-regular-webfont.eot?    GET 200 application/vnd.ms-fontobject

When I use Refresh/Back buttons, there are two more entries for the other fonts as well:

/Content/oxygen-regular-webfont.woff    GET 200 application/x-font-woff
/Content/oxygen-regular-webfont.ttf GET 200 application/octet-stream

CSS file itself is being loaded in a following way:

/Content/site.css   GET 200 text/css

I tried to remove both woff and ttf so I had the following:

@font-face {
    font-family: 'oxygenregular';
    src: url('oxygen-regular-webfont.eot');
    src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

But still IE behaves the same way (except it does not download woff and ttf any more): displays incorrect fallback fonts when navigating through Back/Refresh.

How do I make IE to load correct fonts on Refresh/Back actions?

Answer 1

JustAMartin's answer led us to a different solution:

Instead of commenting those last two lines

    // do not use any of the following two - they break CSS fonts on IE
    HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    HttpContext.Current.Response.Cache.SetNoStore();

We added the following line:

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true);

This should still allow no-cache with the exception of back and forward navigation as I understand it. MSDN - SetAllowResponseInBrowserHistory Method

Answer 2

I just had the same bug, and for those who want to have a pure solution (non exact-technology related): you need to make sure that the font headers you're sending are not saying no-cache. On top of what was written before, there are actually two headers which can do it:

"cache-control: no-cache"

and

"pragma: no-cache"

Both of those are saying browser the same, the first one is part of HTTP1.1, the second one is older (HTTP1.0).

Now, solutions:

• If you really want to serve the fonts (and other files?) without client-side caching, set "cache-control" to "max-age=0"; you can drop pragma header, it's obsolete (or set it to "pragma: cache").
• If you actually want to have caching: remove no-cache values, and set proper max-age (e.g. "cache-control: max-age=3600" - one hour cache). Pragma can be set to "pragma: cache" or removed completely.

Answer 3

I found an alternate solution to resolve this issue.

I have embedded the font directly in stylesheet instead of loading as a separate font file. This works absolutely fine in all the browsers including Windows, Mac, IOS, Android etc and help to reduce number of HTTP requests in the webpage.

This will not require any change in header Cache-Control.

@font-face { font-family: '<FONT NAME>'; src: url(data:application/x-font-woff;charset=utf-8;base64,<BASE64_ENCODED>) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,,<BASE64_ENCODED>) format('truetype'); font-weight: normal; font-style: normal; }

You can use built-in base64 command in OS X or Linux for font encoding.

Answer 4

I've faced with the same issue.

In case if header of the .eot file contains Cache-Control: no-cache value, IE9 doesn't load font properly. Dev Tools showed Result - 200, but column Received showed 400B, in the same time Content-Length was 70Kb. I've used following value Cache-Control: max-age=0, to fix issue.

Answer 5

Don't set the Vary Request Header to https

No font loading

Vary:Accept-Encoding,https

Works

Vary:Accept-Encoding

Setting the cache header is necessary to avoid delayed font loading.

Answer 6

Make sure that it is not a pathing issue, i.e. your CSS file is relative to where the fonts are. In your case, you need your CSS file in the same folder as your font files.