JSF2 web fonts eot and svg mime types not working in IE8

Question

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.

Answer 1

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.