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

css

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;

}

Best Solution

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>
Related Question