Google Fonts giving: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I'm trying to use a google font 'Oswald'. When i embed it into my page in the recommended way:

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

Chrome throws the following error:

XMLHttpRequest cannot load http://fonts.googleapis.com/css?family=Oswald:400,300,700. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://<<redacted>>' is therefore not allowed access.

Is this just a mistake on google's part or am i doing something wrong?

By the way, you shouldn't use ' to delimit argument values in HTML tags. It's not standard, and it's simply wrong. — ItalyPaleAle, Sep 15 '14 at 21:03
@Qualcuno uh, thanks, but that was copied directly from the Google Fonts page. https://www.google.com/fonts#UsePlace:use/Collection:Oswald — deweydb, Sep 15 '14 at 22:42

score 25 · Accepted Answer · answered Sep 09 '14 at 03:06

25

Turns out it was a conflict with prefixfree

Solution was to add "data-noprefix" to the link tag, like so:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css' data-noprefix>

answered Sep 09 '14 at 03:06

deweydb

2,238
2
30
37

Thanks, but i have had issues with // in the past in some browsers. If the site does not have an SSL certificate, i don't see why this matters. – deweydb Sep 15 '14 at 22:43
no it does not but it means you can't install an SSL without it causing an notification – Barkermn01 Sep 16 '14 at 09:52
1

I added the 'data-noprefix' but am still getting the error. – Paul Kenjora Jul 07 '16 at 23:38

Google Fonts giving: No 'Access-Control-Allow-Origin' header is present on the requested resource

1 Answers1

Linked