@font-face and Opencms

May 18, 2011 4:19 pm 1 comment

I’ve started to develop a new site in Opencms and this time I have free way to design it however I want, so I wanted to do something good looking.

The use of the CSS rule @font-face is not difficult, specially using the @font-face generator from fontsquirrel.com. You upload the font you want to use, and the generator transforms it in all the font formats that browsers use, and create a CSS code that you just to paste in your style file.

That way is how this blog is showing this beautiful typografy in its titles – WC Roughtrad by WCFonts.

All this is very easy, but when I tried to do the same in the new Opencms site I realized that It wasn’t working.

After 3 hours of looking for the reasons of the problem I finally found it: Opencms doesn’t export the font files, but it behaves like if it does and my browser was trying to get them from

That file didn’t exist, but Opencms was returning a 303 error instead of the usual 404, so realizing that the files were missing took me some longer, since offline everything was working fine.

Once I understood the problem, I tried to export them from the Opencms admin area but I couldn’t, so I finally copied them manually to the export folder of Opencms inside my Tomcat and… that was the solution.
Write the solution takes me less than five seconds – Copy the font files manually – but understanding what was happening was a nightmare.

I hadn’t any problems then, but in my font-face investigation I read that some browsers have problems if the font mime-type is not correct, so if you want your Opencms not to serve your fonts as text/html, you will have to edit your opencms-vfs.xml, and add the following lines to the mimetipes section:

The svg extension is already in the file. Hope this helps!

javi

Let’s push your website a bit further

My name is Javier Márquez and I have more than 10 years of web programming and web designing experience. If you have a difficult development to complete, maybe you can stop by and see what I can do for you. You can find me on and Twitter.

1 Comment - Leave yours

  • Hi,

    I just found your article as I had the same problem. I know this post is more than a year old but you do not need to copy the files manually. Just add the correct file extensions to your opencms-importexport.xml file within the conf folder of the webapp. Under the node :

    Now OpenCms will export the files to the filesystem.

    Cheers
    Robert

Leave a reply


contact meAnything related to web development like javascript and CSS to create responsive designs, or PHP and node.js to make your website work properly, is my pleasure. If you have an interesting project in mind, I can help to make it real.