Search code examples
cssfontsorbeon

Using font-awesome with Orbeon (@font-face not loading locally hosted fonts)

I'm completely new to Orbeon forms (since last week).

We wanted to use icons from the font=awesome library within our Orbeon forms. Doing so using the official JS CDN (including the .js file within properties-local.xml) worked fine. Doing so using another CSS based CDN (including the .css file within properties-local.xml) also worked fine.

However, for security the environment these forms run in is not permitted to access the outside world. As such the files need hosting locally.

Adding the CSS file to our setup worked fine including the .css file within properties-local.xml loading from /forms/blah/assets/css/font-awesome.css

What fails is loading the fonts from /forms/blah/assets/fonts/

Console log errors show the rendered page is trying to load the files from the correct URI but gives a 404 error.

The most I can find in official documentation and elsewhere online refers to loading in fonts for use in PDF generation. Is there something similar for fonts to use in display in the web based forms too?

Many thanks

Solution

  • On a hunch this turned out to be a mime-type issue. Whilst I had checked that Apache Tomcat included mime-mappings within its web.xml for font files (which it did) I hadn't thought that Orbeon might not be inheriting these settings.

    I saw a post here talking about something similar: http://forum.primefaces.org/viewtopic.php?f=3&t=42002

    Adding the following to my /webapps/blah/WEB-INF/web.xml resolved the issue: 

    <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>font/truetype</mime-type>
</mime-mapping>
<mime-mapping>
    <extension>woff</extension>
    <mime-type>application/font-woff </mime-type>
</mime-mapping>

    The Tomcat service obviously needs restarting before this takes effect.

    Also the following modification to /webapps/blah/WEB-INF/resources/page-flow.xml line 22: 

    <files path="(?!/([^/]+)/service/).+\.(gif|css|pdf|json|js|coffee|map|png|jpg|xsd|htc|ico|swf|html|htm|txt|svg|ttf|eot|woff|woff2)"/>

    Note that's the addition of |ttf|eot|woff|woff2 on the end of that string

    Hope that helps anyone else trying to give this a go :)