Access Control Origin

[bigheadedd]

Hi,

 

I'm wondering if there is anyone who can shed any light on this for me.

I am currently looking to serve web fonts (via @font-face) across multiple servers.

 

I have my main server which hosts the files, along with CSS files for the other domains.

 

Each CSS file is in its own folder, but then protected by its own css file, allowing only the associated domain to access it. So far no problem.

 

However, the CSS file links the main font files; again no problem, however the current configuration I have is this:

 

SetEnvIf Referer mainserver.com localreferer
SetEnvIf Referer fonts.mainserver.com localreferertwo


<FilesMatch \.(eot|woff|ttf|svg)$>
<IfModule mod_headers.c>
Order deny,allow
Deny from all
Header set Access-Control-Allow-Origin "*"

Allow from env=localreferer
Allow from env=localreferertwo
</IfModule>
</FilesMatch>

 

Now, this works to an extent. The user can't go to the font file and download it directly, and the font loads correctly from external domains... but only in firefox. It doesn't load the fonts in safari or chrome (webkit). I think this has something to do with the Access-Control-Allow-Origin, and that safari/webkit doesn't look for that header.

 

I'm a bit confused as to what to do next really, as I could simply add another referer inside the main .htaccess, but it could get quite bulky.

 

If anyone has any ideas that would be amazing!

 

Thanks,

E