JSF Custom font with CSS

Question

I am trying to add a custom font to my _template.html, but it is not rendering the font, only plain text. I tried the solution found here, but did not solve my problem.

My custom font file is in WebContent/Resources/fonts/HelveticaNeueLTStd-LtEx.otf

My CSS file is in WebContent/Resources/css/Font.css

Font.css:

@font-face {
font-family: "Martinelli Logo";

src: url("#{resource['fonts/HelveticaNeueLTStd-LtEx.otf']}");
font-weight: normal;
font-style: normal;

body{
font-family: "Martinelli Logo";
}
}

Obs.: I already tried with only src: url('fonts/HelveticaNeueLTStd-LtEx.otf');, with no luck.

_template.xtml:

<h:body>
<h:outputStylesheet library="css" name="css/Font.css" />
Hello World in custom font!
<h:body />

It is in WebContent/WEB-INF. Should I move resources to WebContent/WEB-INF/resources ? It is weird because I have an image that renders normally on the _template.xhtml that is located in the same folder: WebContent/resources/img — Felipe Wagner
– Felipe Wagner, Commented Mar 28, 2017 at 14:13
I'm not familiar with JSF so I don't know if it's doing any magic behind the scenes that I'm not aware of but, does Resources/css/Font.css work? Also, are you sure your Font.css file is being loaded? Are there any errors in the console? — hungerstar
– hungerstar, Commented Mar 28, 2017 at 14:15

Felipe Wagner · Accepted Answer · 2017-03-28 19:36:34Z

1

The final solution: apparently my browser (Chrome) was loading old cached CSS, so I wasn't being able to see the updates I was developing on my styles. Just cleaned Chrome's cache and everything was working perfectly. I just need to figure how to change that behavior on the browser, since I don't want to clean it for every change on my CSS.

Biggest facepalm ever.

EDIT:

Found the solution by opening Devtools -> Settings -> Checked Disable cache (while DevTool is open)

Now I can edit my CSS and refresh the page to normally see the results. Thanks.

edited Mar 28, 2017 at 19:36

answered Mar 28, 2017 at 18:44

Felipe Wagner

1472 silver badges15 bronze badges

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

2 Comments

hungerstar Over a year ago

LOL, I totally overlooked that too!

Felipe Wagner Over a year ago

This makes me feel so embarassed. Thanks for your attention and patience!

Collectives™ on Stack Overflow

JSF Custom font with CSS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related