@font-face and Opencms

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:

<mimetype extension=".woff" type="application/x-font-woff"/>
<mimetype extension=".ttf" type="font/ttf"/>
<mimetype extension=".eot" type="application/vnd.ms-fontobject" />
<mimetype extension=".etf" type="font/etf" />

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

© arqex 2023
we'll find ourselves
far, far away...
Transitions here have been created using a library of mine:
React interactable.
This awesome hyperspace effect thanks to this codepen from Noah Blon.
Software development can be fun!
Javier Márquez
Software developer