CSS - Font being blocked from Cross-Origin Resource Sharing Policy

Question

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.

CSS Code Source: https://files.stubwire.com/static/stubwire_v3/style.css?date=20141213

@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;  } 

Answer 1

If you don't have mod_headers enabled you can enabled it with

sudo a2enmod headers

And then in your VirtualHost or .htaccess

# Allow access from all domains for webfonts. # Alternatively you could only whitelist your # subdomains like "subdomain.example.com".  <IfModule mod_headers.c>   <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css|woff2)$">     Header set Access-Control-Allow-Origin "*"   </FilesMatch> </IfModule> 

Answer 2

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 

I got the Access-Control-Allow-Origin header usage from: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

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/