JSF2 eot and svg mime web fonts do not work in IE8

Question

SOLUTION: IE8 does not seem to be like loading JSF resources. I just changed the 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 am trying to get custom web fonts working in a JSF2 and IE8 application. Fonts work fine in other browsers, I seem to be having problems with my mime type for eot and svg. What happens in IE8, I get a non-web font rollback declared in CSS.

Here is 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 is what the console tells 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. 

This is 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; } 

The stylesheet is loaded here:

 <h:outputStylesheet library="theme" name="stylesheet.css" target="head" /> 

Does anyone have any idea?

EDIT: Curiosity got better than me, so I ran Fiddler 2 and in IE8, I get 404s for my web fonts , but in the Chrome network bar I see that it downloads fonts in order. Any idea why IE8 404? It is also interesting that Firebug does not display fonts in the Net panel, but I can visually see that they are loading / loading, and also enable / disable / change them using Firebug.

Answer 1

The problem is that the resource handler is looking for a resource with the extension .eot? #iefix, which does not exist, as well as an unknown mime type.

As Paul Irish explained in bulletproof-font-face-implementation-syntax / the? is a fix for IE to avoid 404 errors.

So, if you use the Resource API, the source url will look something like this:

 src: url("/PFThemeSwitcher/javax.faces.resource/fonts/sample.eot.xhtml?ln=theme"); 

which appends the name of the library to the end, followed by '?' so you won’t need to add this'? #iefix '.

But I don’t have access to a Windows PC, so I can’t check it 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 be shown below in the source:

  src: url("/PFThemeSwitcher/javax.faces.resource/fonts/sample.eot.xhtml?ln=theme?#iefix") format("embedded-opentype"); 

Another way is to use the resource APIs and load them along their relative paths, as in the "Solution" section.