@font-face fonts only work on their own domain @font-face fonts only work on their own domain apache apache

@font-face fonts only work on their own domain


This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, 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 (updated to adapt code from the same file in HTML5 Boilerplate):

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

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.

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).


Another way to fix this in Firefox is to embed the font directly into the css file using base64 encoding. Especially nifty if you don't have access to some of the configuration mentioned above.

You can generate the necessary code on fontsquirrel.com: in the font-face Kit Generator choose expert mode, scroll down and select Base64 Encode under CSS Options - the downloaded Font-Kit will be ready to plug and play.

This also has the fringe benefit of reducing page load time because it requires one less http request.


If you do not want to allow resources from all domains but only from sub domain of your site, you should do it like:

# Allow font, js and css to be loaded from subdomainSetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0<IfModule mod_headers.c>    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">        Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN    </FilesMatch></IfModule>

Source: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html