JSF2 add custom font to css stylesheet

Question

i want to use external font WebSymbols

and i placed it my stylesheet.css declaration

@font-face{ 
font-family: 'WebSymbolsRegular';
src: url('websymbols-regular-webfont.eot');
src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('websymbols-regular-webfont.woff') format('woff'),
     url('websymbols-regular-webfont.ttf') format('truetype'),
     url('websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}

.fakeImage {
font-family: 'WebSymbolsRegular';
font-size: 12px;
text-decoration: none;
 }

My stylesheet.css located in META-INF/resources/css/stylesheet.css file. I put font files (eot, svg, etc.) in the same directory - META-INF/resources/css. In header of my jsf page i put reference to this stylesheet:

<h:outputStylesheet library="css" name="stylesheet.css" />

But instead of special symbols from font i got regular text. All other css styles are worked normally. Any idea how to use custom font?

Answer 1

My stylesheet.css located in META-INF/resources/css/stylesheet.css file

META-INF? So this is bundled in a JAR file which is in turn dropped in webapp's /WEB-INF/lib?

Regardless, you need to use the #{resource} resolver instead to resolve classpath resources to proper /javax.faces.resource URLs .

src: url("#{resource['css:websymbols-regular-webfont.eot']}");
src: url("#{resource['css:websymbols-regular-webfont.eot']}?#iefix") format('embedded-opentype'),
     url("#{resource['css:websymbols-regular-webfont.woff']}") format('woff'),
     url("#{resource['css:websymbols-regular-webfont.ttf']}") format('truetype'),
     url("#{resource['css:websymbols-regular-webfont.svg']}#WebSymbolsRegular") format('svg');

Further, I recommend to put one additional path in /resources folder which can then represent the real library name. The library="css" is namely the wrong usage of the resource library. It should not represent specific resource types (CSS/JS/images) at all, but a real common library name. For example, /common. You can then reference the stylesheet and the resources as follows:

<h:outputStylesheet library="common" name="css/stylesheet.css" />

and

src: url("#{resource['common:css/websymbols-regular-webfont.eot']}");
src: url("#{resource['common:css/websymbols-regular-webfont.eot']}?#iefix") format('embedded-opentype'),
     url("#{resource['common:css/websymbols-regular-webfont.woff']}") format('woff'),
     url("#{resource['common:css/websymbols-regular-webfont.ttf']}") format('truetype'),
     url("#{resource['common:css/websymbols-regular-webfont.svg']}#WebSymbolsRegular") format('svg');

See also:

• What is the JSF resource library for and how should it be used?
• How to reference CSS / JS / image resource in Facelets template?