Geek Answers Handbook

JSF2 add custom font to CSS stylesheet

I want to use the external font WebSymbols

and I put it in 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 is located in the file META-INF / resources / css / stylesheet.css. I put the font files (eot, svg, etc.) in the same directory - META-INF / resources / css. In the header of my jsf page, I will put a link to this stylesheet:

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

But instead of special characters from the font, I got plain text. All other css styles work fine. Any idea on using a custom font?

+7
source share
1 answer

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

META-INF? So, this is due to the JAR file, which in turn fell into webapp /WEB-INF/lib ?

Regardless, you should use the #{resource} resolver instead of resolving the classpath resources for the correct /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');

In addition, I recommend placing one additional path in the /resources folder, which can then represent the name of the real library. library="css" is the misuse of the resource library. It should not represent specific resource types (CSS / JS / images) at all, but is the real common name of the library. For example, /common . You can then reference the stylesheet and 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:

+19
source

More articles:


All Articles