@Font-Face Ie Problems

@font-face not displaying correctly in IE

Multiple font formats

To support a wide range of browsers, use a .ttf, .woff and .eot version of the font.

@font-face {
    font-family: 'shardee';
    src: url('fonts/Shardee.eot');
    src: url('fonts/Shardee.eot?#iefix')
             format('embedded-opentype'),
         url('fonts/Shardee.woff') format('woff'),
         url('fonts/Shardee.ttf') format('truetype');
}

You can use a Font conversion website like Font Squirrel, to convert the .ttf font into .woff and .eot.

DRM false positive

As @Jukka pointed out, there's a legal issue with the TTF file that's preventing it from being usable in Windows. In the IE developer console, the following error message is displayed :

CSS3114: @font-face failed OpenType embedding permission check.
Permission must be Installable.

Shardee appears to be an abandoned font with an unknown license type. Although it may be legal to use this font, Windows seems to require that every TTF file has DRM info that explicitly says it's legal to embed it in web pages. The error in IE is most likely a false positive.

To test this, I took a TTF font that's known to be legally licensed for use on websites. The TTF version didn't work in IE because of the DRM error. This example is definitely a false positive. This is one of the reasons why it's necessary to use multiple font formats, and why a single format like TTF will not work on all browsers.

Although Windows doesn't allow IE to use the TTF file, IE can still use the WOFF or EOT version. When I tested the above @font-face rule on a local webserver, using all three font formats, the Shardee font rendered correctly in all versions of IE (though with an error message in the IE developer console).

Steps to try:

1. Convert the .ttf file to .woff and .eot
2. Upload the .woff and .eot files to the same directory as the existing .ttf file.
3. Replace the @font-face rule with the one above. I fixed a couple typos in the initial version of it.

If you still have a problem, there may be an issue with the web server settings. Related question: IE9 blocks download of cross-origin web font

IE11 Font Face Issue

I know this is an old questions. But I ran into the issue today so I thought I'd document the solution in case it helps others.

I had a very similar issue where fontello fonts (which load via @font-face) were working great from one server in all browsers including IE 11, but the same exact html/css served up from a different server (in my case Asp.Net Core) worked in all browsers EXCEPT IE. And to be specific the only IE version I care about supporting at this point is IE 11.

I was baffled just like the original poster of this question. In the end I found the issue which was the cache headers for the one server was configured different than the other server.

The server that was able to get IE 11 to properly render the font-face fonts returned cache-control:max-age=0 for the font files. The server that caused the Chinese characters to show up in IE 11 was returning cache-control:no-cache, no-store, must-revalidate To fix the issue I removed the cache-control header from responses for font files. Now the fonts render properly in all browsers including IE 11.

@font-face not working with specific version of Internet Explorer 11

This could be related to an issue with the Security Settings as described in this bug report.

In Internet Options go to:

• The Security Tab
• Security level for this zone
• Custom level
• Downloads
• Font Download

If it's Disabled then you need to Enable it.

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 not working in IE or Edge

If anyone stumbles across this post, I ended up just using a more web-friendly font.

Make sure your @font-face rules are NOT contained in media queries. @font-face rules contained in media queries do not work in IE, Edge, but work in every other modern browser I tested on.

@font-face ie problems

You need to set Access-Control-Allow-Origin HTTP Header for this

See here:

IE9 blocks download of cross-origin web font

---

Does this work?

@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue.eot');
    src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue.otf') format("opentype");
}

---

On Fontsquirrel they do it this way

http://www.fontsquirrel.com/fontfacedemo/bebas-neue

Download the @font-face kit from there

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot');
    src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.woff') format('woff'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.ttf') format('truetype'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@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;

}

Strange @font-face issue in IE11 (renders only after you inspect an element in developer tools)

Turns out I had a blank font-family declaration on the body tag. I must have forgotten to remove it when I was making some changes. Removing the blank "font-family: ;" fixed the issue.

---

Related Topics