JSF cannot resolve font resources for @font-face

Question

I'm currently trying to a) add some non-standard fonts and b) the font-awsome icon library to my project. I've donwloaded the the newest version of FA 4.7.0 on their website.

My project structure is like this:

web
   ----resources
         ---- css
                ---- default.css
         ---- fonts

                ---- Raleway-Regular.ttf
                ---- Roboto-Regular.ttf
                ---- Questrial-Regular.ttf
                ---- Poppins-Regular.ttf

         ---- font-awesome-4.7.0
                ---- css

                       ---- font-awesome.css
                       ---- font-awesome.min.css     

                ---- fonts

                       ---- fontawesome-webfont.eot
                       ---- fontawesome-webfont.woff
                       ---- fontawesome-webfont.woff2
                       ---- fontawesome-webfont.svg
                       ---- fontawesome-webfont.ttf
         ---- js

                ---- default.js

Both fontawesome.css and my default.css file define fonts via @font-face. Knowing that JSF cannot handle the fonts as a resource without the use of EL, I changed the code of the stylesheet:

font-awesome.css

@font-face {
 font-family: 'FontAwesome';
 src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&v=4.7.0");
 src: url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.eot']}&#iefix&v=4.7.0") format('embedded-opentype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff2']}&v=4.7.0") format('woff2'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.woff']}&v=4.7.0") format('woff'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.ttf']}&v=4.7.0") format('truetype'), url("#{resource['font-awesome-4.7.0:fonts/fontawesome-webfont.svg']}&v=4.7.0#fontawesomeregular") format('svg');
 font-weight: normal;
 font-style: normal;

}

My css file is referencing the fonts as below:

@font-face {
font-family: Railway;
src: url("#{resource['fonts:Raleway-Regular.ttf']}") format("truetype");
}

@font-face {
font-family: Questrial;
src: url("#{resource['fonts/Questrial-Regular.ttf']}") format("truetype");
}

@font-face {
font-family: Poppins;
src: url("#{resource['fonts/Poppins-Regular.ttf']}") format("truetype");
}

@font-face {
font-family: "Roboto";
src: url("#{resource['fonts:Roboto-Regular.ttf']}") format("truetype");
}

The fact that I'm using both the ":" and "/" seperator is to test which one's working... apparently none :)

I also added all necessarry MIME type mappings in my web.xml.

In the home.xhtml file, I use these resources like that:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://xmlns.jcp.org/jsf/html"
  xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
  xmlns:f="http://xmlns.jcp.org/jsf/core">

  <h:head>
  <h:outputStylesheet library="font-awesome-4.7.0" name="css/font-awesome.css" />
  <h:outputStylesheet name="css/default.css" />
  <h:outputScript name="js/default.js" />
  </h:head>

Now after all these configurations, it seems as if the resource handler is not able to load the fonts (my costum and the FA ones) as well as the JavaScript file. The interesting part is that all other styles of the css file are imported correctly. Also it's strange that it worked the exact same way when I booted the server for the first time today - after adding a favicon to the page, it didn't work anymore.

I'm getting notified of the following errors in my browser:

Uncaught TypeError: Cannot read property 'children' of null(…) http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Questrial-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Raleway-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff2?v=4.7.0
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Poppins-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/css/resources/fonts/Roboto-Regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.woff?v=4.7.0
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8080/$root/javax.faces.resource/fonts/fontawesome-webfont.ttf?v=4.7.0
Failed to load resource: the server responded with a status of 404 (Not Found)

I'd be grateful for any help

Server: Glassfish 4.1.1

Yet again, if I start the server for the first time, it loads the resources perfectly fine. I'm using IntelliJ Idea and whenever I've updated some xhtml page, I click the "update classes and resources" function. Afterwards the resources are not loaded any more.... It seems JSF handles the resources only at server boot up - I'd be grateful if anyone knows more regarding this topic.. — Wecherowski, Nov 19 '16 at 09:44

Wecherowski · Accepted Answer · 2020-02-21T12:32:23.667

2

Disappointing as this may sound, it was just my browser caching all resources.

After using Ctrl + F5, the browser reloaded the page and all according stylesheets

Generally it turned out to be beneficial to turn off the browser cache while doing web development :-).

edited Feb 21 '20 at 12:32

answered Jul 07 '17 at 22:50

Wecherowski

818
11
24

1

Setting your JSF project in 'development mode' helps too here https://stackoverflow.com/questions/19193912/uses-of-javax-faces-project-stage – Kukeltje Feb 21 '20 at 12:39

JSF cannot resolve font resources for @font-face

My project structure is like this:

1 Answers1