I am designing a website (e.g. mywebsite.com) and this site loads font-face fonts from another site (say anothersite.com). I was having problems with the font face font loading in Firefox and I read on this blog:
Firefox (which supports @font-face
from v3.5) does not allow cross-domain
fonts by default. This means the font
must be served up from the same domain
(and sub-domain) unless you can add an
“Access-Control-Allow-Origin” header
to the font.
How can I set the Access-Control-Allow-Origin header to the font?
Best Answer
So what you do is... In the font files folder put an htaccess file with the following in it.
also in your remote CSS file, the font-face declaration needs the full absolute URL of the font-file (not needed in local CSS files):
e.g.
That will fix the issue. One thing to note is that you can specify exactly which domains should be allowed to access your font. In the above htaccess I have specified that everyone can access my font with
"*"
however you can limit it to:A single URL:
Header set Access-Control-Allow-Origin http://example.com
Or a comma-delimited list of URLsAccess-Control-Allow-Origin: http://site1.com,http://site2.com
(Multiple values are not supported in current implementations)