Do IE browsers (IE6, 7, 8) support @font-face?

Question

According to this article, http://www.standardista.com/css3/font-face-browser-support IE supports @font-face but I couldn\'t find any site which has valid custo

Answer 1

Internet Explorer 9 requires an EOT type font. TTF fonts can be used in most of the other recent browser versions and SVG for devices like iPhone and iPad. You can read more about browser support for @font-face here http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Font Squirrel is also a great resource for creating web font files including EOT from your existing font files. Please be sure you have a licence to use the fonts on the web. You can access the free web font file generator here: http://www.fontsquirrel.com/fontface/generator

A typical CSS entry for an @font-face set looks like this:

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

Then you can call your font by assigning the "font-family" attribute using css

.my-class { font-family: "custom-font" }

Answer 2

Older version of Internet Explorer supports Embedded OpenType (EOT) files before @font-face was formalized in CSS3. You can find compatible files on sites like FontSquirrel or Google's Font API. FontSquirrel's conversion tool should also help here. Also worth a read would be the latest bulletproof syntax recommended by fontspring to embedding multiple files for multiple browsers.

---

The fact that this wasn't used frequently until recently is two-folds; first there are legal issues with using @font-face fonts - copyrights to be specific. Unlike cufon which only retains the shape of the fonts, with @font-face you are transmitting the actual fonts themselves, which has legal implications.

The other problem is support in other browsers - Firefox 3 was the last of the modern browsers to not support @font-face in some way, so before Firefox 3.5's release in mid-2009 @font-face was still not viable. In addition to all that there are differences in format support between the browsers, so the development of the technology is slow.

Answer 3

Yes they do starting with IE6*. A working example.

The font must follow some special rules though, for example the font name must begin with the family name and the family-name in the CSS must match the family name of the font.

If you use the font squirrel webfont generator to generate an .eot from a .ttf, it will ensure the generated .eot is usable on IE6.

* Beware that there are aliasing issues with custom fonts rendering in IE6/7/8.

Answer 4

You can also write:

@font-face {
    font-family: 'custom-font';
    src: url('/some/directory/custom-font.eot');
}
@font-face { 
    font-weight: normal;
    font-style: normal;
    font-family: 'custom-font';
    src: url('/some/directory/custom-font.woff') format('woff'),
         url('/some/directory/custom-font.ttf') format('truetype'),
         url('/some/directory/custom-font.svg#webfont') format('svg');
}

Works as well as the example above, without using the "?" mark.