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:

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:

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

Answer 1

Try this :

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

Instead of

url('fonts/...')

Answer 2

@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.