Java Server Faces with Custom Font defined in css

Question

I can't figure out how to enforce using of my custom font with JSF. I use Glassfish 4. My filesystem looks like this:

Filesystem

Where Basic.css style is applied to BasicTemplate.xhtml and this template is used in index.xhtml. Everything works fine, every change to the Basic.css file has effect, except for the custom font.

My CSS looks exactly like this:

@font-face{
font-family: 'Conv_Champagne_Limousines';
src: url('fonts/Champagne_Limousines.eot');
src: url('fonts/Champagne_Limousines.woff') format('woff'),     url('fonts/Champagne_Limousines.ttf') format('truetype'),     url('fonts/Champagne_Limousines.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}


body{
    font-family: 'Conv_Champagne_Limousines';
}

Things I've already tried:

Triple check for typos
Various paths. Relative, absolute ....
Cleaning, rebuilding, restarting Glassfish.

David H. · Accepted Answer · 2014-03-03 10:08:31Z

4

Try this :

url('#{resource['fonts/...']}')

Instead of

url('fonts/...')

answered Mar 3, 2014 at 10:08

David H.

9631 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brent Robinson Over a year ago

You'll most likely see that this resolves to /javax.faces.resources/fonts/Champagne_Limousines.eot rather than the /resources/fonts/Champagne_Limousines.eot you were probably expecting. This is because JSF is attempting to parse the file before it is being served. This is why you can use the syntax in David H's answer in your CSS file.

utarid · Accepted Answer · 2017-08-10 02:24:11Z

3

@David H.'s answer caused "Unexpected token COLON found" error in my Netbeans. So I changed his code to url('#{resource["fonts/..."]}') or url("#{resource['fonts/...']}") and the error was gone.

edited Aug 10, 2017 at 2:24

answered Jun 9, 2014 at 20:44

utarid

1,7255 gold badges25 silver badges42 bronze badges

Collectives™ on Stack Overflow

Java Server Faces with Custom Font defined in css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related