@font-face fonts only work on their own domain

Question

I am trying to create a type of font repository for use on my websites, so that I can call to any font in the repository in my css without any other set-up. To do this I created a subdomain on which I placed folders for each font in the repository that contained the various file types for each font. I also placed a css file called font-face.css on the root of the subdomain and filled it with @font-face declarations for each of the fonts, the fonts are linked with an absolute link so that they can be used from anywhere.

My issue is that it seems that I can only use the fonts on that subdomain where they are located, on my other sites the font does not show. Using firebug I determined that the font-face.css file was successfully being linked to and loaded. So why does the font not correctly load? Is there protection on the font files or something? I am using all fonts that I should be allowed to do this with, so I don't see why this is occurring. Maybe it is an apache issue, but I can download the font just fine when I link to it.

Oh, and just to clarify, I am not violating any copyrights by setting this up, all the fonts I am using are licensed to allow this sort of thing. I would however like to set up a way that only I can have access to this repository of fonts but that's another project.

Answer 1

This is because Firefox thinks cross-domain (even with subdomains) Web font embedding is a bad idea.

You can convince it to load fonts from your subdomain by adding this to the top-level .htaccess file of the subdomain where your fonts are being served:

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

EDIT 2: in response to this:

I would however like to set up a way that only I can have access to this repository of fonts but that's another project.

I'm not sure if the Access-Control-Allow-Origin header allows you to specify a range of subdomains of only your second-level domain. I'll dig around and update my answer again if I find anything other than "*".

The W3C spec for Access-Control-Allow-Origin doesn't say anything more than either a wildcard "*" or a specific domain. So far, I've found this SO answer which suggests validating the Origin header, but I think that's a Firefox-only header. I'm not sure about other browsers (they don't even need the .htaccess trick above for cross-domain Web fonts to work).