title: JSF2 web fonts eot and svg mime types not working in IE8
body: <p><strong>SOLUTION:</strong> 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:</p>
  
  <pre><code>//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'),
  </code></pre>
  
  <p><br><br></p>
  
  <p>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.</p>
  
  <p>Here's my web.xml:</p>
  
  <pre><code>&lt;!-- web fonts --&gt;
  &lt;mime-mapping&gt;
      &lt;extension&gt;eot&lt;/extension&gt;
      &lt;mime-type&gt;application/vnd.ms-fontobject&lt;/mime-type&gt;
  &lt;/mime-mapping&gt;
  &lt;mime-mapping&gt;  
      &lt;extension&gt;otf&lt;/extension&gt;  
      &lt;mime-type&gt;font/opentype&lt;/mime-type&gt;  
  &lt;/mime-mapping&gt;      
  &lt;mime-mapping&gt;  
      &lt;extension&gt;ttf&lt;/extension&gt;  
      &lt;mime-type&gt;application/x-font-ttf&lt;/mime-type&gt;  
  &lt;/mime-mapping&gt;      
  &lt;mime-mapping&gt;  
      &lt;extension&gt;woff&lt;/extension&gt;  
      &lt;mime-type&gt;application/x-font-woff&lt;/mime-type&gt;  
  &lt;/mime-mapping&gt;
  &lt;mime-mapping&gt;  
      &lt;extension&gt;svg&lt;/extension&gt;  
      &lt;mime-type&gt;image/svg+xml&lt;/mime-type&gt;  
  &lt;/mime-mapping&gt;
  </code></pre>
  
  <p>And here's what the console is telling me:</p>
  
  <pre><code>[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.
  </code></pre>
  
  <p>Here's how my fonts are declared in the css file:</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>Here's how the stylesheet is loaded:</p>
  
  <pre><code>&lt;h:outputStylesheet library="theme" name="stylesheet.css" target="head" /&gt;
  </code></pre>
  
  <p>Anyone have any ideas?</p>
  
  <p><strong>EDIT:</strong>  Curiousity got the better of me so I fired up Fiddler 2 and <strong>in IE8, I'm getting 404s for my web fonts</strong>, 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.</p>