@Font-Face Won't Load via Https in Ie

@Font-Face won't load via https in IE

So, I just figured out a way that is working for IE, Safara, Firefox and Chrome as far as I can see.

Since all the things I tried did not work out, I was trying to find a way that could "embed" the fonts eitherway to my websites, to my CSS or to my server. Added the font to my server wasn't an option according to my server-guy so I decided to get back to Font-Squirrel and see if there was an option they offered in converting the fonts.

I reuploaded my fonts en chose the export mode. Somewhere around the bottom of the settings fields it says "Base64 Encode", luckily I knew what this meant (I can imagine someone who doesn't easily looks over this option) so I genereted my CSS files with base64 embdedded fonts.

This works flawlessly. Ofcourse this made my CSS files some kb's bigger (5kb vs 129kb). But I don't see a big adventage of 100kb extra with the current internet connections.

Just to compare, non base64 encoded CSS:

@font-face {
    font-family: 'ProximaNovaSemibolds';
    src: url('../font-face/proximanova-semibold-webfont.eot');
    src: url('../font-face/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font-face/proximanova-semibold-webfont.woff') format('woff'),
         url('../font-face/proximanova-semibold-webfont.ttf') format('truetype'),
         url('../font-face/proximanova-semibold-webfont.svg#ProximaNovaSemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

Base64 encoded CSS:

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('proximanova-bold-webfont-webfont.eot');
    }

@font-face {
    font-family: 'ProximaNovaBold';
    src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF+8ABMAAAAArzAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcYT+YZ0dERUYAAAHEAAAALQAAADIC+wHsR1BPUwAAAfQAAAf7AAAURoqljoZHU1VCAAAJ8AAAACAAAAAgbJF0j09TLzIAAAoQAAAAWwAAAGB+FsNBY21hcAAACmwAAAGdAAAB+uY47ZljdnQgAAAMDAAAADoAAAA..alotmorecharacters...FDmYlYoTkE8HdsTFF2cwU74AAU/lecUAAA==) format('woff'),
         url('proximanova-bold-webfont-webfont.ttf') format('truetype'),
         url('proximanova-bold-webfont-webfont.svg#ProximaNovaBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

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

@font-face EOT not loading over HTTPS

I know this is an old thread but I just had to weigh in. We had the same issue with EOT and WOFF fonts in all versions of Internet Explorer (7-11) not loading over HTTPS. After hours of trial and error and comparing our headers with other working sites we found it was the vary header that was messing things up. Unsetting that header for those file types fixed our issue right away.

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

Bonus Reading

• Eric Lawrence: Vary with Care (archive)
• IE Blog: Caching Improvements in Internet Explorer 9 (archive)

@font-face not loading in IE8

Firstly I would check that the font files are actually being served. It could be as silly as a relative path not being correct - although in this case I doubt it. Use a tool like Charles or Fiddler for this. These tools should always be the first port of call for checking that files are being served as expected.

I would also check that the extensions/mime types are set up in the site's config, or in IIS's config.

IE 10 not loading fonts

This cannot work, as all versions of IE do not support the .otf font format - see: https://caniuse.com/ttf

Try the following method:

@font-face {
    font-family: "GothamBook";
    src: url("../fonts/Gotham-Book.eot");
    src: url(".../fonts/Gotham-Book.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Gotham-Book.woff") format("woff"), 
    url("../fonts/Gotham-Book.ttf") format("truetype"), 
    url("../fonts/Gotham-Book.svg#Gotham-Book") format("svg");
}

Are the path settings correct in your version generated with fontsquirrel's webfont generator? Also the font-family name looks wrong. I guess it should be "GothamBold".

And also keep the appropriate font licence in mind ...! ;-)

In your CSS file when using the fonts, you should at least add a generic font-family like so:

font-family: GothamLight, "sans-serif";

or additionally an alternativ font (which might be available on each plattform)

font-family: GothamLight, Arial, Helevetica, "sans-serif";

---

Related Topics