M

Liferay portlet + primefaces + custom fonts

So, a long story short, I needed to use custom fonts in a primefaces portlet. I didn't feel like overriding the fonts in the primefaces theme with an additional .css file so I decided to include those fonts inside the primefaces theme. My co-worker had included fonts in another primefaces theme in the following manner with great success so I felt like a little monkey and tried to do the same.

The primefaces folder structure (this is not the problem, all good in the folder structure land):


theme-1.0.0
-- META-INF
  +-- MANIFEST.MF
  +-- resources
      +-- primefaces-theme
          +-- images
          +-- fonts
              +-- somefont
                  +-- somefont.eot
                  +-- somefont.woff
                  +-- somefont.tff
                  +-- somefont.svg
          +-- theme.css

This is how my co-worker referenced to a font in theme.css:


@font-face {
    font-family: 'somefont';
    src: url("#{resource['primefaces-theme:fonts/somefont/somefont.eot']}");
    src: url("#{resource['primefaces-theme:fonts/somefont/somefont?#iefix']}")
            format('embedded-opentype'),
        url("#{resource['primefaces-theme:fonts/somefont/somefont.woff']}") format('woff'),
        url("#{resource['primefaces-theme:fonts/somefont/somefont.ttf']}") format('truetype'),
        url("#{resource['primefaces-theme:fonts/somefont/somefont.svg#somefont']}") format('svg');

This however doesn't seem to work in liferay + primefaces setup although it clearly works in my co-worker's project (no liferay). After multiple exceptions like this...


[MissingResourceImpl:112] Resource handler=[com.liferay.faces.bridge.application.ResourceHandlerOuterImpl@150040b] was unable to create a resource for resourceName=[fonts/somefont/somefont.eot?#iefix] libraryName=[primefaces-theme] contentType=[null]
10:47:54,122 ERROR [BaseURLEncodedStringImpl:57] URL path must start with a '/' or include '://'
java.lang.IllegalArgumentException: URL path must start with a '/' or include '://'

...I figured out what I was doing wrong. See the lines with svg file reference and ?#iefix? Those were incorrect. This is how I thought I should have referenced to the font files in the first place:


@font-face {
    font-family: 'somefont';
    src: url("#{resource['primefaces-theme:fonts/somefont/somefont.eot']}");
    src: url("#{resource['primefaces-theme:fonts/somefont/somefont']}?#iefix")
            format('embedded-opentype'),
        url("#{resource['primefaces-theme:fonts/somefont/somefont.woff']}") format('woff'),
        url("#{resource['primefaces-theme:fonts/somefont/somefont.ttf']}") format('truetype'),
        url("#{resource['primefaces-theme:fonts/somefont/somefont.svg']}#somefont") format('svg');

Such a small change but took a while to figure it out. It's time for a HOORAY, aye? However, this does not work on IE. So what to do, what to do? On every page load my tomcat console spits out following error messages...


16:26:29,976 ERROR [MissingResourceImpl:78] Resource handler=[com.liferay.faces.bridge.application.ResourceHandlerOuterImpl@64bb2d9e] was unable to create a resource for resourceName=[fonts/somefont/somefont.eot] libraryName=[primefaces-theme?] contentType=[null]
16:26:29,986 ERROR [MissingResourceImpl:136] Resource handler=[com.liferay.faces.bridge.application.ResourceHandlerOuterImpl@64bb2d9e] was unable to create a resource for resourceName=[fonts/somefont/somefont.eot] libraryName=[primefaces-theme?] contentType=[null]
16:26:29,987 WARN  [ResourceImpl:166] Unable to determine if user agent needs update because resource URL was null for resourceName=[fonts/somefont/somefont.eot].

...and IE console cries because of this:


CSS3111: @font-face encountered unknown error.

After some trial and error I finally seem to get it working. See that ? in the error message after theme name? Just get rid of it on the iefix line. Now you have a font that works on all browsers. It wasn't that hard now was it?

The final solution for now:


@font-face {
    font-family: 'somefont';
    src: url("#{resource['primefaces-theme:fonts/somefont/somefont.eot']}");
    **src: url("#{resource['primefaces-theme:fonts/somefont/somefont']}#iefix")**
            format('embedded-opentype'),
        url("#{resource['primefaces-theme:fonts/somefont/somefont.woff']}") format('woff'),
        url("#{resource['primefaces-theme:fonts/somefont/somefont.ttf']}") format('truetype'),
        url("#{resource['primefaces-theme:fonts/somefont/somefont.svg']}#somefont") format('svg');

This article was written by mussuponkki .