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;
}
@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.
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 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;
}
Webfonts used within font fallback in IE8
I'm using a stripped down version of your code (for the sake of clarity alone - there's nothing wrong with it) and testing in lots of browsers (with the webfont being STIX, like you, not that I'm aware if this plays a role), and I'm seeing some odd behaviour: font fallback in most browsers does work, but only when excluding all italic variants of fonts (be they italic or bolditalic).
I.e. this works (100% of the time), with browsers falling back to STIX for those chars not in arial:
@font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'stix';
src: url('stixgeneralbol-webfont.eot');
font-weight: bold;
font-style: normal;
}
body {font-family: arial, stix, sans-serif;}
… but this does not work 100% of the time (although sometimes it does display the chars!):
@font-face {
font-family: 'stix';
src: url('stixgeneral-webfont.eot');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'stix';
src: url('stixgeneralitalic-webfont.eot'); /* note - italic font variant */
font-weight: normal;
font-style: italic;
}
body {font-family: arial, stix, sans-serif;}
The reason for this appears to be that the STIX fonts package has errors.
In order to get around this, open your STIX fonts package in FontForge and save - FontForge will inform you of errors. Fix these, and only then import into FontSquirrel. Font fallback should now work correctly.
Related Topics
How to Check for Duplicate CSS Rules
How to Use Svg Sprite Sheet as CSS Background-Image While Maintaining Aspect Ratio and Scalability
Pixel Density, Retina Display and Font-Size in CSS
Responsive Images Positioned Over Image
Why Does Grid-Gap Cause an Overflow
Csp Style-Src: 'Unsafe-Inline' - Is It Worth It
Change Icon-Bar (☰) Color in Bootstrap
How to Make a CSS Triangle with Smooth Edges
Display Bootstrap Popovers Outside Divs with Overflow:Hidden
Hovering Over CSS Transition in Safari Lightens Certain Font Color
CSS - Div Width Depending on Image Size Above
Using Multiple-Class Selectors in IE7 and IE8
Clicking a Child Doesn't Trigger the Parent's :Active State in Ie