How can I integrate fontello into my JSF project?

[William Saxton]

I downloaded the folder and copied everything into the directory structure as follows:

/resources/style.css /* This is my custom css file */

/resources/fontello

--> css

--> font

and am including the following in my web page:

<link rel="stylesheet" type="text/css" href="./resources/style.css"/>

<link rel="stylesheet" type="text/css" href="./resources/fontello/css/fontello.css"/>

According to my chrome console, the page sees the style.css file and fontello.css file just fine.  I think its having trouble seeing the actual fonts though:

1. Request URL: https://<MY_DOCUMENT_ROOT>/resources/fontello/font/fontello.woff?58682987
2. Request Method:
   GET
3. Status Code:
   404 Not Found

Anyone know what might be going on?  (I've attached a screenshot of the icon.  It looks like its showing a rectangle with a bunch of numbers inside of it.  I also do have the proper mime-type configured in case that matters:

<mime-mapping>

    <extension>woff</extension>

    <mime-type>application/font-woff</mime-type>

</mime-mapping>

[vit...@rcdesign.ru]

I'd type path to woff manually, to check if it's really available.

Vitaly

--
You received this message because you are subscribed to the Google Groups "Fontello" group.
To unsubscribe from this group and stop receiving emails from it, send an email to fontello+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[William Saxton]

It's not.  That's the problem.

Unfortunately, JSF does things in a very convoluted way where the "url" entries inside the @font-face entry of the main css file aren't straightforward.  For example, the CSS file provided by Font Awesome has entries like this:

src: url("#{resource['webjars:font-awesome/4.3.0/fonts/fontawesome-webfont.eot']}&v=4.3.0");

src: url("#{resource['webjars:font-awesome/4.3.0/fonts/fontawesome-webfont.eot']}&#iefix&v=4.3.0") format('embedded-opentype'),

...

I tried editing the fontello.css file to match this, but it still didn't work.  So, I was hoping someone else had successfully done this.

  

--
You received this message because you are subscribed to a topic in the Google Groups "Fontello" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/fontello/fRMkCX4-Wfg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to fontello+u...@googlegroups.com.

[William Saxton]

Okay, I got it to work but I still have a question:

I took the fontello.css file and modified it so that, instead of directly access the URL, it did it the "JSF way" by wrapping the URL in a #{resources[] call.

src: url('../font/fontello.eot?58682987');

src: url('../font/fontello.eot?58682987#iefix') format('embedded-opentype'),

       url('../font/fontello.woff?58682987') format('woff'),

       url('../font/fontello.ttf?58682987') format('truetype'),

       url('../font/fontello.svg?58682987#fontello') format('svg');

to:

src: url("#{resource['fontello:font/fontello.eot']}");

src: url("#{resource['fontello:font/fontello.eot#iefix']}") format('embedded-opentype'),

       url("#{resource['fontello:font/fontello.woff']}") format('woff'),

       url("#{resource['fontello:font/fontello.ttf']}") format('truetype'),

       url("#{resource['fontello:font/fontello.svg#fontello']}") format('svg');

This didn't work.  I had to ALSO remove the "?58682987" portion.  What are these numbers for exactly?  Why are they needed?

[vit...@rcdesign.ru]

Those random numbers are to reset cache if you update fonts.

You also can use *-codes.css, and define font face as you wish, if default full CSS is not ok for you.

Vitaly