20

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

5 Answers 5

5

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.

3
  • 1
    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. Aug 28, 2014 at 6:13
  • If anyone is still having this issue, I've found that changing it to 'https' will bypass most proxy servers. Jun 25, 2018 at 17:29
  • 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.
    – MegaCasper
    Aug 27, 2019 at 15:27
3

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.

3
  • 1
    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/LMR26m3ig6mlUgQqjj1qMKCWcynf_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: * .....
    – rhand
    Jan 28, 2015 at 11:41
  • 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.
    – user1244033
    Jan 28, 2015 at 15:08
  • 1
    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.
    – Pedro
    Apr 27, 2015 at 7:32
3

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

Before

Issue Resolved

Issue Resolved

2

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.

1

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:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.