1

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 />
Community
  • 1
  • 1
Felipe Wagner
  • 154
  • 2
  • 14
  • Where is `_template.html` in your project? – hungerstar Mar 28 '17 at 14:11
  • 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 Mar 28 '17 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 Mar 28 '17 at 14:15
  • Hmm...is the path to the image `img/image.jpg`? – hungerstar Mar 28 '17 at 14:16
  • Unfortunately, not error is thrown in the console. – Felipe Wagner Mar 28 '17 at 14:17
  • Yes, the path to the image is `WebContent/resources/img/mart_rzs.png` and it is being rendered normally with `` – Felipe Wagner Mar 28 '17 at 14:18
  • So Font.css is being included in your page? Can you verify this? According to [this SO post](http://stackoverflow.com/questions/13540907/maven-and-jsf-webapp-structure-where-exactly-to-put-jsf-resources) it looks like you have the structure setup properly. – hungerstar Mar 28 '17 at 14:21
  • Apparently the HTML is not showing any custom fonts on Elements guide. The browser console is showing: `Failed to load resource: the server responded with a status of 404 ()`. Tracing this error, it show `RES_NOT_FOUND`. Is it the resource .otf? – Felipe Wagner Mar 28 '17 at 14:22
  • I use Chrome, for that you open Dev Tools with F12, select Network tab and make sure _All_ or _CSS_ is selected. Refresh page. You should see `Font.css` listed. If it's red, it couldn't load the file. Or you can right click your page, select View Page Source, then in the source find your link to your CSS file and click it. If you have the proper path you CSS file will open in a new tab. – hungerstar Mar 28 '17 at 14:25
  • That could be the font or CSS file. The path from your CSS file to font file should be in relation to the CSS file's location. I'm assuming `#{resource['...']}` is JSF function or similar and as I'm not familiar with JDF I don't know if it will modify the path you give it in any way. The path for `src` should be `url( "../fonts/HelveticaNeueLTStd-LtEx.otf" )`. If it doesn't modify the path you give it, then it will be looking for the font in `/css/fonts`. Since `/fonts` is not a child of `/css` (it's a sibling) you need to move up one folder in your path with `../`. – hungerstar Mar 28 '17 at 14:37
  • The problem still persists. I added a fonts folder in the css folder with the font, with no luck. – Felipe Wagner Mar 28 '17 at 14:58
  • Where you had the fonts before is preferred. I wouldn't place the font folder in the CSS folder. I was just explaining paths. Did you find out which file is creating the 404 error? I'm guessing it's still a path issue. – hungerstar Mar 28 '17 at 15:02
  • Yeah, I changed the Font.css to `body { color: red; }` and it was still missing in the browser Network tab. I don't know why it can't find the path, as it is set correctly. – Felipe Wagner Mar 28 '17 at 15:56
  • It's not set correctly then. I would right click your page and Inspect Element. This will give you a look at the live DOM under the _Element_ tab. Go to the `` where your CSS `` will be. You can modify the `href` by right clicking it and selecting _Edit Attribute_. What is the path for the image that `` outputs? I'm guessing it generates a `` tag with `src` attribute and the `src` doesn't equal `mart_rzs.png`. There's something before it. – hungerstar Mar 28 '17 at 16:12
  • Actually all my resources are in the body tag of the template. The img html rendered is `` The RES_NOT_FOUND error is in this html snippet of : ``. That's weird, since I set the `` inside . – Felipe Wagner Mar 28 '17 at 16:29
  • Wow, that's not a path I was expecting for your `img`. There seems to be a lot going on behind the scenes with JSF, I was expecting something like `Resources/img/mart_rzs.png`. Did you try `../fonts/HelveticaNeueLTStd-LtEx.otf` instead of `fonts/HelveticaNeueLTStd-LtEx.otf`? – hungerstar Mar 28 '17 at 16:33
  • Oh my... now the `body{ color: red; }`code worked... it found the CSS file, but not the font file. That is really weird, since I removed the `@font-face` block of code before, and the style didn't changed with only the change color style. Next headache: setting up the font file correctly. – Felipe Wagner Mar 28 '17 at 16:42
  • What did you do that worked? – hungerstar Mar 28 '17 at 16:49
  • I changed the `outputStyleSheet` to `` instead of ``. Now the CSS style is correctly setup, but the font is not rendering and no error is given by the console in the browser. – Felipe Wagner Mar 28 '17 at 16:52
  • Sounds like the `url()` in the `@font-face` declaration is wrong. How to fix that? I'm not sure. I don't know JSF but I'm sure it's a path issue. Maybe try to get a hold of [BalusC](http://stackoverflow.com/users/157882/balusc)? He answers all the JSF stuff on StackOverflow. I'm sure he'd know in a heartbeat. He's also got [this curated list of JSF answers](https://jsf.zeef.com/bauke.scholtz). Maybe you'll find your answer there. – hungerstar Mar 28 '17 at 17:18
  • Weirdest stuff ever, JSF related: apparently the server (Tomcat) isn't loading the resources, like CSS changes, correctly when I restart it (every change made to font.css I was restarting the server as well). I just inspected the HTML of the page and saw the CSS being loaded, but in an older version (before lots of changes I made). – Felipe Wagner Mar 28 '17 at 17:54

1 Answers1

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.

Felipe Wagner
  • 154
  • 2
  • 14