Google Font: no Access-Control-Allow-Origin:*

Question

WordPress Website with the issue: *see below

Hello. On my incognito Chrome browser and Firefox, Google Fonts aren't rendering.

The error I get in the console is:

Font from origin 'http://fonts.gstatic.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 'http://volusiaflaglerac.com' is therefore not allowed access.

Assuming from these instructions https://developers.google.com/fonts/docs/troubleshooting , a proxy is stripping out Access-Control-Allow-Origin:*

So I put this code in my .htaccess:

Header add Access-Control-Allow-Origin "*" Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

This is the code for one of the Google Fonts:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>

According to the report I run on here http://www.rexswain.com/httpview.html , it is reading the Access Control code.

I'm still seeing the default fonts.

What am I missing?

Edit: please help!

• Edit: The issue has been resolved and I have removed the URL

Answer 1

This is a security issue on your server preventing itself from downloading foreign files.

Since the .htaccess modification didn't work, you should download the google font and add it to your site.

FYI, this Chrome extension can help you bypass cross origin requests on your browser, but the error will still remain for your users

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-ntp-icon