paulstraw

guillee:

FYI, before anyone else spends a few hours pulling their hair out and shouting profanities at Firefox.

If you want to specify a font for @font-face using an absolute URL, or a font hosted on a different domain, it needs to be served with Access Control Headers, specifically the Access-Control-Allow-Origin header set to “*” or the domains allowed to request the font. This also applies to fonts hosted on a different sub-domain.

I’d like to have the last two hours of my life back, please.

The whole “access control header” thing can easily be done by putting a .htaccess in the same folder you’re storing the fonts. Just create a plaintext file called .htaccess and copy/paste the following into it:

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