On my website https://www.stubwire.com when people start an order process I am loading the CSS file from https://files.stubwire.com. The problem is that the CSS file is trying to load the font giving the error. Can someone help show me how to fix this issue? My fixes I have seen talk about using Amazon S3 but this is loading from our own servers.
Error
Font from origin 'https://files.stubwire.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 'https://www.stubwire.com' is therefore not allowed access.
@font-face {
font-family: 'DroidSansRegular';
src: url('fonts/DroidSans-webfont.eot');
src: url('fonts/DroidSans-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/DroidSans-webfont.woff') format('woff'),
url('fonts/DroidSans-webfont.ttf') format('truetype'),
url('fonts/DroidSans-webfont.svg#DroidSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
解决方案
If you control the server, then you can adjust the settings of your server Apache/Nginx or whatever to add the Access-Control-Allow-Origin header to your HTTP responses.
In your case, you probably want something like (this will allow your domain to access the fonts, but prevent other domains from using it, including your own subdomains):
Access-Control-Allow-Origin: https://www.stubwire.com
Here is another resource that gives examples of how to set up various servers (IIS, Nginx, Apache) to add the Access-Control-Allow-Origin header: http://support.maxcdn.com/how-to-use-cdn-with-webfonts/