On IE CSS font-face works only when navigating through inner links
Solution 1:
I found a solution but I cannot see the reason why it works (well, only one reason - it's IE :D).
What I did was to put the same site on Apache and test again. On Apache the fonts worked fine even when using Refresh button. Then in the network inspector I saw that Apache is returning 304 instead of 200 for the eot file and it hit me - so it's caching issue. I went to my ASP.NET app and sure enough - for security reasons (and also to avoid caching AJAX requests) someone had disabled every caching you could imagine:
// prevent caching for security reasons
HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false);
HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1));
HttpContext.Current.Response.Cache.SetValidUntilExpires(false);
HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
HttpContext.Current.Response.Cache.SetNoServerCaching();
// 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();
As soon as I commented out the last two lines of code, suddenly fonts started to work without problems on IE. So I guess the answer is: IE cannot load the font if it is not cached. I have no idea why the problem happens only when refreshing/navigating back, though.
Edit - Alternative 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();
Change the SetAllowResponseInBrowserHistory
to true
instead:
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
Solution 2:
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.