CODEWITHSUNDEEP
cssjsffonts
Dmitriy Tkachenko
Dmitriy Tkachenko

Reputation: 324

Import custom fonts to JSF

I can't import custom fonts into my JSF pages. Project structure looks like this: Project structure screenshot

I've tried to write the following in my styles.css:

@font-face {
    font-family: "Gotham Pro Bold";
    src: url('#{resource["fonts/GothaProBol.otf"]}');
}

But it doesn't work. It gets compiled to /javax.faces.resource/fonts/GothaProBol.otf.xhtml, but the font is not in javax.faces.resource and I have no idea why it appends .xhtml.

The following:

src: url("#{facesContext.externalContext.requestContextPath}/resources/fonts/GothaProBol.otf");

is compiled to

src: url("/resources/fonts/GothaProBol.otf");

but it doesn't work either.

How do I import the fonts properly?

Thanks in advance.

Upvotes: 3

Views: 6566

Answers (3)

Sergej Zr
Sergej Zr

Reputation: 11

I had the same problem. This URL works

@font-face {
    font-family: "MyFont";
    src:
    url("mfont/mfont.ttf.xhtml?ln=fonts")
    format("truetype")
}

The file is situated in "/resources/fonts/mfont/mfont.ttf"

Also note that the css file itself is included using h:outputStylesheet (because font urls need to be relative to css)

Upvotes: 0

Ayoub
Ayoub

Reputation: 1

I had this problem, I solve it as following :

@font-face {
    font-family: "Roboto-Light";
    src: url('#{resource["fonts/Roboto-Light.ttf"]}');
}

Upvotes: 0

Dmitriy Tkachenko
Dmitriy Tkachenko

Reputation: 324

Did this using OmniFaces:

  1. Added the dependency (pom.xml):
<dependency>
    <groupId>org.omnifaces</groupId>
    <artifactId>omnifaces</artifactId>
    <version>1.8.1</version>
</dependency>
  1. Added OmniFaces' resource handler to faces-config.xml:
<application>
    <resource-handler>
        org.omnifaces.resourcehandler.UnmappedResourceHandler
    </resource-handler>
</application>
  1. Mapped /javax.faces.resource/* to FacesServlet as follows (web.xml):
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/javax.faces.resource/*</url-pattern>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
  1. Used #{resource["<path>"]} in CSS, like so:
@font-face {
    font-family: "Gotham Pro Bold";
    src: url('#{resource["fonts/GothaProBol.otf"]}');
}

Upvotes: 4

Related Questions