Cross-Origin request warning for google fonts

Question

I am using Google Webfonts on my website. In the console on Chrome I get the following warning:

Blink is considering rejecting non spec-compliant cross-origin web font requests: http://fonts.gstatic.com/s/raleway/v8/0dTEPzkLWceF7z0koJaX1A.woff2. Please use Access-Control-Allow-Origin to make these requests spec-compliant.

Upon inspecting the request headers there appears to not be any Access-Control headers present:

Remote Address:109.231.231.219:80
Request URL:http://fonts.gstatic.com/s/raleway/v8/0dTEPzkLWceF7z0koJaX1A.woff2
Request Method:GET
Status Code:304 Not Modified
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,en-GB;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
DNT:1
Host:fonts.gstatic.com
If-Modified-Since:Mon, 04 Aug 2014 17:04:46 GMT
Origin:http://samarkanddesign.com
Referer:http://samarkanddesign.com/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Response Headersview source
Age:369865
Date:Fri, 08 Aug 2014 02:01:39 GMT
Expires:Sat, 08 Aug 2015 02:01:39 GMT
Server:GFE/2.0

What can I do to solve this? Can anyone explain what's going on as I don't fully understand CORS. The page when viewed in firefox and IE seems to block the font request.

One thing to note is that I'm viewing the site on my company network. It might have a strange setting or proxy that strips out Access-Control headers. Can anyone one a normal connection verify the headers are usually present? The page is at http://samarkanddesign.com

Solution 1

Ok, so clearly Google Fonts allows cross-domain access or their service wouldn't be much use.

The explanation for my particular problem is that I'm on a corporate internet connection. It must use some proxy that is stripping out access control headers from web responses. This causes the browser to give warnings or failures when loading the resources.

I've contacted IT warning them about their misconfigured proxy and hopefully this will be fixed.

Solution 2

CORS header is not being served under certain circumstances. Fonts are failing to set this header randomly.

This is a Google bug and you can't fix this as they are not serving the header. I recommend to cease using this buggy Google CDN service and download fonts instead and serve them from your web server.

Solution 3

If you have this issue just in one browser:

I had a Chrome Browser Extension running which caused this problem. In my case it was "Alexa page rank" - but test out all your extensions by disabling one after the other.

Solution 4

This is because you are accessing NON secure (HTTP) google font on secure channel.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800,300italic,400italic,600italic);
@import url(https://font.googleapis.com/css?family=Open+Sans+Condensed:300italic);

Changed to

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800,300italic,400italic,600italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300italic);

Before

Issue Resolved

Solution 5

In my case I was overwriting the location using the sensors -> location tool in the Chrome dev tools. After setting it to "No override" it worked fine:

View more solutions

Comments

[murraybiscuit]

I'm getting the same issue here now. Since I've updated to the latest chrome (37.0.2062.94 m). Fonts finally render smoothly in chrome, but I'm getting the CORS error on sites using fonts. Strangely enough, fonts with a regular style (font-weight:normal) are fine. Those with a specific weight (font-weight:300) seem to be giving hassles.

[rhand]

Yeah am having the issue too realized it was not CORS that was needed on the server asking, but the server serving being Google. When I checked with curl it did stat COR was allowed, But Firefox keeps on stating it is not. curl -I http://fonts.gstatic.com/s/fenix/v4/LMR26m3ig6mlUgQqjj1qMKCW‌​cynf_cDxXwCLxiixG1c.‌​woff HTTP/1.1 200 OK Content-Type: font/woff Last-Modified: Wed, 20 Aug 2014 00:33:42 GMT Date: Fri, 23 Jan 2015 17:50:29 GMT Expires: Sat, 23 Jan 2016 17:50:29 GMT Access-Control-Allow-Origin: * Timing-Allow-Origin: * .....

[Admin]

I'm getting this issue with Chrome too, it is not just Firefox. Sometimes happens, sometimes not. This is because they use multiple balanced nodes to deliver fonts and some of them are not delivering the header. It can happen with curl too.

[Pedro]

Serving the the fonts from your own server is not necessarily an easy thing. Google actually returns different font files (woff, woff2 or ttf) based on what is supported by the browser requesting them. woff2 files are 30% lighter than regular woff. Considering the fonts actually render properly I'm probably gonna keep using Google fonts CDN.

[AaronAsAChimp]

If anyone is still having this issue, I've found that changing it to 'https' will bypass most proxy servers.

[MegaCasper]

I had the similar problem with fonts and some icons in Chrome.The reason was one of my browser extension which I use as a proxy. I just turned it off.