Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 573
JustAMartin Avatar asked Nov 16 '12 10:11

JustAMartin


People also ask

How does font face works?

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

How to use font face in html?

You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag.


2 Answers

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

like image 110
JustAMartin Avatar answered Sep 21 '22 03:09

JustAMartin


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.

like image 20
Alexandr Skachkov Avatar answered Sep 21 '22 03:09

Alexandr Skachkov