Header set Access-Control-Allow-Origin "*"
Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).
I actually had the problem in Google Chrome as well, which led me to believe it was a ubiquitous issue, but maybe Chrome has the same thing? Regardless, they both work now. Again thanks very much for the solution and the help with the whitelist idea.
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).
This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, Web font embedding is a bad idea.
Worked flawlessly, thank you very much! And thank you for looking for a way to allow a whitelist of domains, that would be excellent! Again thanks very much! +1
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):
You're welcome! I happened to have had this issue when designing my site a couple of months back, and that's what I found :)