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

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/


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>

Tags:

Css