Pixelastic

You can cut our wings but we will always remember what it was like to fly.

Using fonts hosted on a subdomain with @font-face and Firefox

As a security reason, Firefox do not allow an @font-face rule to load fonts hosted on a different domain (even a subdomain).

I don't exactly understand why, I guess it has something to do with preventing crosslinking and copyright violation. I think we should keep the website author handle all this stuff and not required the browser to make assumptions like that.

Anyway, I recently tried to move my CSS file to a subdomain, to reduce pages loading times. Doing so I saw that my fonts did not correctly load on Firefox.

After some digging, I found that I had to manually allow them to be linked from an other domain, server-side. Here is the little snippet I added to my .htaccess

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

 

Comments

Wow, thanks so much for this tip. I've seen lots of .htaccess hacks for this problem firefox has with external @font-face sources... None of them worked except yours.

FYI, I'm on Network Solutions.

Thanks ! Seb
Sebastien Dewandre
Just pasted your code into my .htaccess and it worked right away! Thanks for your advise!
Thomas Hartmannon 20/2/12
Thomas Hartmann
@Sebastian and Thomas : Thanks for your feedback, and glad that helped :)
Timon 21/2/12
Tim
... and 4 spam blocked

Adding a comment

Leave this field empty, it is only here to defeat spam bots
Will not be published