Do Ie Browsers (IE6, 7, 8) Support @Font-Face

@font-face works in IE8 but not IE9

No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I'd like it though.

Update: With some trickery I managed to get it working. Seems like IE9 is using the .woff version of the font (which I had excluded) over the .eot that I thought it would. I used the @font-face generator from fontsquirrel to get all the different font variations and included them in my project, using the smileyface-local. Did not have to alter my .htaccess file. Now works fine and looks the same in all IE versions:

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

---

(I even got mad fresh using Mark "Tarquin" Wilton-Jones' text-shadow hack, applying same look to IE versions as rest of the browser world. Old school? Looks great! Was it worth it? Well, learned a lot. ;)

@font-face - how to make it work on all browsers

Firstly, you don't have the copyright to embed most fonts - anyone can download them, so it's no different to putting the font on your server for someone to download.

My advice would be to use the font squirrel tool found here: http://www.fontsquirrel.com/fontface/generator to generate the files and the code for you.

Be careful not to share fonts you don't have the rights to do so with.

How to fix font face for internet explorer

Internet Explorer does not support TTF, it only supports EOT.

Check this link for further explanation.

This is to some extent a duplicate of this question

I'd just like to make an observations though: Generating this list on the fly for every single page slows down page load plus it puts some extra load on your server (ie it's not cacheable, it makes your pages larger, I/O reading the font list every time, etc)

Internet Explorer 11 and supported web fonts

This is the standard way of loading with @font-face, hacky fixes and all -

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

hey please check the Compatibility tables for support of EOT, check these links -

Link 1

Link 2

@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

---

Related Topics