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;

}

You could inline the font in your css or use a different font, like verdana. — Darth Egregious, Dec 31 '14 at 22:19
You just need to add the Access-Control-Allow-Origin header in your resource response — Gohn67, Dec 31 '14 at 23:19
Like this: `Access-Control-Allow-Origin: http://www.foo.com` Example from Wikipedia: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing — Gohn67, Dec 31 '14 at 23:20

score 22 · Answer 1 · edited Apr 24 '19 at 19:25

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>

score 15 · Accepted Answer · edited Nov 29 '22 at 00:01

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: https://support.maxcdn.com/hc/en-us/articles/360036555812

New URL: https://www.maxcdn.com/one/tutorial/how-to-use-cdn-with-webfonts/ — TTUGoldFOX, Dec 19 '16 at 23:46

score 0 · Answer 3 · answered Sep 10 '18 at 09:58

for me, this code worked perfectly. make sure you change your domain.

<ifmodule mod_headers.c="">
   SetEnvIf Origin "^(.*\.domain\.com)$" ORIGIN_SUB_DOMAIN=$1
   Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
   Header set Access-Control-Allow-Methods: "*"
   Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</ifmodule>

score -15 · Answer 4 · answered Jul 12 '17 at 08:00

In your CSS where you are loading the font instead of an HTTP response, turn it into HTTPS.

For instance, in the code:

@font-face {
font-family: 'DroidSansRegular';
src: url('http://...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;

}

Make it:

src: url('https://...fonts/DroidSans-webfont.eot');

Do this with all your fonts.

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

4 Answers4

Linked

Related