If you try to serve fonts from RackSpace Cloud Files or other CDN then you may run into problems with browsers refusing to load the fonts. Here’s an example error: Font from origin ‘http://xxxxx.xxx.rackcdn.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.acme.com’ is therefore not allowed access. The problem is your browser doesn’t consider it secure to load the font from a different domain then the web page itself was loaded from. The solution is CORS or Cross-Origin Resource Sharing as described here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS When RackSpace Cloud Files serves the font file, it needs to set a header like:
|
|
Access-Control-Allow-Origin: * |
or more specifically:
|
|
Access-Control-Allow-Origin: www.acme.com |
This informs your browser that it is save to include this resource in the indicated alternate origin. RackSpace Cloud Files provide a means to change the headers on individual files. Here’s the technical