JSF2 web fonts eot and svg mime types not working in IE8
jsf-2, mime-types, webfonts
Solution
The problem here is the Resource handler is looking for a resource with extension .eot?#iefix which doesn't exist and also whose mime-type is unknown.
As explained by Paul Irish in bulletproof-font-face-implementation-syntax/ the ? is a fix for IE to avoid 404 errors.
So if you use Resource API, the source url will look something like below:
src: url("/PFThemeSwitcher/javax.faces.resource/fonts/sample.eot.xhtml?ln=theme");
which adds the library name to the end followed by '?' so you won't need to add that '?#iefix'.
But I do not have access to a Windows PC, so I can't verify that now. But if you still need to add '?#iefix' you can do something like this:
src: url("#{resource['theme:fonts/sample.eot']}?#iefix") format('embedded-opentype');
which will show like below in the source:
src: url("/PFThemeSwitcher/javax.faces.resource/fonts/sample.eot.xhtml?ln=theme?#iefix") format("embedded-opentype");
Other way is to not use Resource API and load them by their relative paths like you did in your Solution section.
Problem
SOLUTION: IE8 doesn't seem to like JSF's resource loading. I just changed my src url to relative paths and the fonts are loading now: ``` //this wasn't working for me, 404'ing in IE8 src: url( #{resource['theme/fonts:mycustom_regular-roman-webfont.eot?#iefix']} ) format('embedded-opentype'), //this works for me in IE8 src: url( ../resources/theme/fonts/mycustom_regular-roman-webfont.eot?#iefix ) format('embedded-opentype'), ``` I'm trying to get custom web fonts working in a JSF2 app and IE8. The fonts are working fine in other browsers, I seem to be having issues with my mime type for eot and svg. What's happening in IE8 is I'm getting the non-web font fallback declared in CSS. Here's my web.xml: ``` <!-- web fonts --> <mime-mapping> <extension>eot</extension> <mime-type>application/vnd.ms-fontobject</mime-type> </mime-mapping> <mime-mapping> <extension>otf</extension> <mime-type>font/opentype</mime-type> </mime-mapping> <mime-mapping> <extension>ttf</extension> <mime-type>application/x-font-ttf</mime-type> </mime-mapping> <mime-mapping> <extension>woff</extension> <mime-type>application/x-font-woff</mime-type> </mime-mapping> <mime-mapping> <extension>svg</extension> <mime-type>image/svg+xml</mime-type> </mime-mapping> ``` And here's what the console is telling me: ``` [4/23/13 10:59:37:522 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_medium-roman-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml. [4/23/13 10:59:37:530 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_medium-roman-webfont.svg#omnes_ods_regularitalic. To resolve this, add a mime-type mapping to the applications web.xml. [4/23/13 10:59:37:534 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_medium-italic-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml. [4/23/13 10:59:37:541 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_medium-italic-webfont.svg#omnes_ods_regularitalic. To resolve this, add a mime-type mapping to the applications web.xml. [4/23/13 10:59:37:546 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_regular-roman-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml. [4/23/13 10:59:37:552 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_regular-roman-webfont.svg#omnes_ods_regularregular. To resolve this, add a mime-type mapping to the applications web.xml. [4/23/13 10:59:37:557 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_regular-italic-webfont.eot?#iefix. To resolve this, add a mime-type mapping to the applications web.xml. [4/23/13 10:59:37:564 PDT] 0000001f context W JSF1091: No mime type could be found for file omnesods_regular-italic-webfont.svg#omnes_ods_regularitalic. To resolve this, add a mime-type mapping to the applications web.xml. ``` Here's how my fonts are declared in the css file: ``` @font-face { font-family: 'mycustom_regularregular'; src: url( #{resource['theme/fonts:mycustom_regular-webfont.eot']} ); src: url( #{resource['theme/fonts:mycustom_regular-webfont.eot?#iefix']} ) format('embedded-opentype'), url( #{resource['theme/fonts:mycustom_regular-webfont.woff']} ) format('woff'), url( #{resource['theme/fonts:mycustom_regular-webfont.ttf']} ) format('truetype'), url( #{resource['theme/fonts:mycustom_regular-webfont.svg#omnes_ods_regularregular']} ) format('svg'); font-weight: normal; font-style: normal; } ``` Here's how the stylesheet is loaded: ``` <h:outputStylesheet library="theme" name="stylesheet.css" target="head" /> ``` Anyone have any ideas? EDIT: Curiousity got the better of me so I fired up Fiddler 2 and in IE8, I'm getting 404s for my web fonts, but in Chrome's network panel I can see it loading the fonts fine. Any idea why IE8 is 404'ing? Also interesting is Firebug doesn't show the fonts in the Net panel, but I can visually see they're getting downloaded/loaded as well as turn them on/off/change via Firebug.