I'm having a slight issue with my embedded fonts. They seem to be working perfectly in Firefox, Chrome, and Safari, but unfortunately not in Internet Explorer (tried versions 11 and 10). I've managed to get some fonts to load in IE, but others just won't cooperate. Here's a snippet of the CSS:
/* functioning */
@font-face {
font-family: 'FoundersGroteskWeb-Semibold';
src: url(./fonts/FoundersGroteskWeb-Semibold.eot);
src: url(./fonts/FoundersGroteskWeb-Semibold.eot?#iefix) format('embedded-opentype'),
url(./fonts/FoundersGroteskWeb-Semibold.woff) format('woff');
font-style: normal;
font-weight: normal;
}
/* non-operational */
@font-face {
font-family: 'FoundersGroteskX-CondensedWeb-Bold';
src: url(./fonts/FoundersGroteskX-CondensedWeb-Bold.eot);
src: url(./fonts/FoundersGroteskX-CondensedWeb-Bold.eot?#iefix) format('embedded-opentype'),
url(./fonts/FoundersGroteskX-CondensedWeb-Bold.woff) format('woff');
font-style: normal;
font-weight: normal;
}
All fonts are correctly named and served. One discrepancy I noticed is that while other browsers were using the woff file, IE was opting for the first eot file (without #iefix). In an attempt to resolve this, I removed all references to eot files so IE would default to woff. However, even then it only loaded the first font and ignored the second one (unlike other browsers which had no issue loading both).
Checking the network tab in IE, I can see a 200 response for the first font, but nothing at all for the second font, indicating there might be a parsing issue with the CSS. Both declarations are identical except for the font name, so it's puzzling why one isn't working.
If anyone has any suggestions on what else I could try, please share because I'm running out of options!