CSS Fonts missing – No Access-Control-Allow-Origin header

Someone, anyone, please?

https://stackoverflow.com/questions/25577981/font-from-origin-has-been-blocked-from-loading-by-cross-origin-resource-sharing

I’m not sure if I need to edit a setting in W3TC, NGINX config or in Amazon CloudFront.

Try this
https://davidwalsh.name/cdn-fonts

@jgjn151 did you manage to resolve this issue ?

I think this is a W3TC issue, i also get this error but i only use W3TC not NGINX or Cloudfront.

Its nothing just paste below code in your .htaccess file <IfModule mod_headers.c>
Header add Access-Control-Allow-Origin “*”
</IfModule>

https://stackoverflow.com/questions/26125030/font-awesome-icons-not-showing-in-chrome-a-maxcdn-related-cross-origin-resource

The code posted by sonusonics will add the header to every file not just fonts. Use the code from stackoverflow instead.

<IfModule mod_headers.c>
<FilesMatch "\.(svg|ttf|otf|eot|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

Does anyone have any other ideas on this?

Have same error on my site:
(index):1Font from origin ‘https://wittertmarketing.com&#8217; 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.wittertmarketing.com&#8217; is therefore not allowed access.

My fonts were just embedded right in my site in the assets folder and I used @font-face in the Css to call them

Have put in coding above by hmkay on both the .htaccess pages but didn’t change anything. I’m only just trying to learn developing so the language is really hard for me. Do I need to put this code on another page as well?

The site didn’t have any issues until I ran an SEO tool called Attracta, now it’s only got one visible bit and the rest is coming up blocked. I’ve emailed support for both the SEO tool and the server but no one is getting back to me. I would just take down the site and put it up again if I thought it was going to work but I’ve already tried to do that with just a few pages and no change so worried I would waste a whole day with same result…

anyone please??

@chesterfield1111 -@hmkay’s fix worked for me. The fact that you mentioned two .htaccess files is a little strange. Try disabling one and use whatever is at your public_html root only.
I would also change “*” to “mydomain.com” for security reasons.

Thanks for the help, unfortunately I had to do a full reinstall as couldn’t get it figured out by my deadline. Thanks for the help anyhow..

+1 to hmkay’s suggestion!

<IfModule mod_headers.c>
<FilesMatch "\.(svg|ttf|otf|eot|woff|woff2)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

would like to see this integrated in the plugin

This should solve your problem, just copy paste it into your .htaccess file en re-upload it, clear your cache and eventually also clear your CDN files and the problem is solved:

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# 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|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Source: MaxCDN