Search code examples
cssfontsfont-face

Where to place fonts folder for use of @font-face?


I would like to use the fonts of my fonts folder, which is in the css folder. The css folder is in the resources folder.

But it doesn’t work whatever the browser used (IE, chrome, firefox). What’ s wrong ?

I am using RichFaces 4.3.6.

@font-face {
    font-family: 'foundrysterling-mediumcyRg';
    src: url('fonts/fostmdcy-webfont.eot');
    src: url('fonts/fostmdcy-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fostmdcy-webfont.woff2') format('woff2'),
         url('fonts/fostmdcy-webfont.woff') format('woff'),
         url('fonts/fostmdcy-webfont.ttf') format('truetype'),
         url('fonts/fostmdcy-webfont.svg#foundrysterling-mediumcyRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Solution

  • As RichFaces is used, the correct syntax for URL was :

    @font-face {
    font-family: 'foundrysterling-mediumcyRg';
    src: url('#{resource["css:fonts/fostmdcy-webfont.eot"]}');
    src: url('#{resource["css:fonts/fostmdcy-webfont.eot"]}?#iefix') format('embedded-opentype'),
         url('#{resource["css:fonts/fostmdcy-webfont.woff2"]}') format('woff2'),
         url('#{resource["css:fonts/fostmdcy-webfont.woff"]}') format('woff'),
         url('#{resource["css:fonts/fostmdcy-webfont.ttf"]}') format('truetype'),
         url('#{resource["css:fonts/fostmdcy-webfont.svg"]}#foundrysterling-mediumcyRg') format('svg');
    font-weight: normal;
    font-style: normal;
    

    }

    Thanks for all answers !