CSS @Font-Face Not Working in IE8

Font Face not working in IE8 as expected

If IE8 throws the CSS3111: @font-face encountered unknown error, you probably have the non-matching font-family name problem.

To resolve this, you need to edit your font file, define identical names for Fontname, Family name and Name for humans and export your TTF. This can be done using the FontForge application. Afterwards, you than again convert it for web (EOT, WOFF).

More info: http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/

Update

Made it working by downloading an own version of the TTF font and converted it for web. The CSS I used:

@font-face {
    font-family: 'portagoitc-tt';
    src: url('fonts/portagoitc-tt.eot');
    src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'),
         url('fonts/portagoitc-tt.woff') format('woff'),
         url('fonts/portagoitc-tt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

CSS @font-face not working in IE8

this works in ie8/9

http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html

@font-face {
    font-family: 'AftaserifRegular';
    src: url('AftaSerifThin-Regular-webfont.eot');
    src: url('AftaSerifThin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('AftaSerifThin-Regular-webfont.woff') format('woff'),
         url('AftaSerifThin-Regular-webfont.ttf') format('truetype'),
         url('AftaSerifThin-Regular-webfont.svg#AftaserifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

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

Custom fonts not working in ie 8 and below

The first line gave an error.
Removing:

src: url('fonts/lobster.eot');

Did the trick.

---

Related Topics