Failed to decode downloaded font in jsf

Question

For some reason my locally stored font is not being decoded correctly in my jsf application. I've tried everything, and at this point I'm at a loss.

This is the css reference (located in project/resources/text - same as font files)

@font-face {
  font-family: 'BunkenTechSansStd-Med';
  src: url("#{resource['text/30B733_0_0.eot']}");
  src: url("#{resource['text/30B733_0_0.woff2']}") format('woff2'),
       url("#{resource['text/30B733_0_0.woff']}") format('woff'),
       url("#{resource['text/30B733_0_0.ttf']}") format('truetype');
}

The sheet is referenced in the template as:

<h:outputStylesheet library="text" name="MyFontsWebfontsKit.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="style.css"></h:outputStylesheet>

The error I'm receiving in chrome is stated as follows (for all three files):

"failed to decode downloaded font: http://localhost:1717/javax.faces.resource/text/30B733_0_0.woff2.jsf"

Here's is the folder structure:

Furthermore the mapping is as follows:

<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>svg</extension>
    <mime-type>image/svg+xml</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>woff2</extension>
    <mime-type>application/x-font-woff2</mime-type>
</mime-mapping>

And lastly a pic of the error in dev tools:

Why is it trying to load `30B733_0_0.woff2.jsf` instead of `30B733_0_0.woff2`? Where is that secondary `.jsf` extension coming from? — Mike 'Pomax' Kamermans, May 08 '16 at 19:06

score 0 · Answer 1 · answered May 08 '16 at 16:10

0

JSF apparently requires folder nav as ":" instead of backslashes.

@font-face {font-family: 'BunkenTechSansStd-Med'; src: url("#{resource['text:30B733_0_0.eot']}");
src: url("#{resource['text:30B733_0_0.woff2']}") format('woff2'),
url("#{resource['text:30B733_0_0.woff']}") format('woff'),
url("#{resource['text:30B733_0_0.ttf']}") format('truetype');}

answered May 08 '16 at 16:10

Rasmus Hjorth Lüdeking

710
2
9
22

Using `library="text"` and `library="css"` is in first place wrong. See also http://stackoverflow.com/q/11988415 – BalusC May 09 '16 at 08:30

Failed to decode downloaded font in jsf

1 Answers1