Externally hosted @font-face problems in Firefox

A quick one today.

While setting up our website some time ago we realised that one of our custom @font-face wasn't working at all in Firefox but it was working perfectly for Safari and Chrome. The only difference with other fonts used in the page was that it was loaded from an external domain. And in fact that was the reason!

The W3C CSS3 specification defines in section 4.9 font fetching requirements and its implications. They warn that fonts will typically not be loaded cross-origin unless authors specifically takes steps to permit cross-origin loads. Sites can explicitly allow cross-site loading of font data using the Access-Control-Allow-Origin HTTP header.

As Firefox follows CSS3 specification to the letter (not like Chrome or Safari, which didn't have the problem) we had to change this default behavior.

For our Apache HTTP Server the solution was as easy as follow the specification and define the header in our VirtualHost entry.

<VirtualHost *:80>
  ServerName www.trenddevs.co.uk

  # other config...

  Header set Access-Control-Allow-Origin "*"

</VirtualHost>