Fixing webfont errors in Joomla

Joomla 3.0 brought default web fonts, and notably icon fonts, to the party with the new default template, Protostar.

This is a very welcome move, with icon fonts allowing us to forgo images in many areas but, unfortunately, it also brings a new error;

Resource interpreted as Font but transferred with MIME type image/svg+xml: http://urhost.com/media/jui/fonts/IcoMoon.svg 🔗

If, like me, you are the type of developer who has Developer Tools constantly enabled you will have already noticed this rather annoying error. It happens because there are some special requirements to serving webfonts correctly that seem to have been overlooked in the initial Joomla! 3.0 releases. Fortunately, it is incredibly easy to fix. You already have .htaccess enabled in Joomla! of course (if not, go away and enable .htaccess now!) so simply add the following to the file:

AddType image/svg+xml   	       svg svgz
AddEncoding gzip                       svgz
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

Check your console again and you will see the error has gone. Told you it was easy, didn’t I?