On IE CSS font-face works only when navigating through inner links

by

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

More Related Contents:

  1. @font-face EOT not loading over HTTPS
  2. @font-face works in IE8 but not IE9
  3. Internet Explorer @font-face is failing
  4. How do I make background-size work in IE?
  5. Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
  6. Why is @font-face throwing a 404 error on woff files?
  7. Why should we include ttf, eot, woff, svg,… in a font-face
  8. CSS flexbox not working in IE10
  9. CSS @font-face absolute URL from external domain: fonts not loading in firefox
  10. Background-image in keyframe does not display in Firefox or Internet Explorer
  11. Internet Explorer z-index bug?
  12. Apply style ONLY on IE
  13. @font-face src: local – How to use the local font if the user already has it?
  14. Bootstrap dropdowns menus appearing behind other elements – IE7
  15. What bug does zoom:1; fix in CSS?
  16. Does IE 8 have a limit on number of stylesheets per page?
  17. Make Adobe fonts work with CSS3 @font-face in IE9
  18. Multiple font-weights, one @font-face query
  19. CSS: Using raw svg in the URL parameter of a background-image in IE
  20. CSS transitions with calc() do not work in IE10+
  21. Fallback fonts on special characters
  22. CSS rounded corners in IE8
  23. CSS Blur in IE 11
  24. Custom cursor image doesn’t work in all IEs?
  25. How to make Google Fonts work in IE?
  26. Using @font-face with Rails 3.1 app?
  27. How to fix Internet explorer 7 bug when using percentage widths for layout?
  28. IE6/IE7 css border on select element
  29. Downloadable font on firefox: bad URI or cross-site access not allowed
  30. Fix custom font line-height with CSS

Leave a Comment