CodeNewbie Community 🌱

Mette Vorraa
Mette Vorraa

Posted on

How to add google font to react?

How to add google font to react app?

I have seen lots of advice online, but the methods result in errors in web inspect console.

Here's what I've got in css file:

@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans');
body {
font-family: 'Kumbh Sans', sans-serif;
}

Errors in console:
Access to script at 'https://fonts.google.com/specimen/Kumbh+Sans?query=kumbh+sans#standard-styles' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

GET https://fonts.google.com/specimen/Kumbh+Sans?query=kumbh+sans net::ERR_FAILED 200

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://fonts.google.com/specimen/Kumbh+Sans?query=kumbh+sans#standard-styles

Thank you thank you!

Top comments (1)

Collapse
terabytetiger profile image
Tyler V. (he/him)

CORS is always the worst kind of error - essentially your localhost page isn't recognized as allowed to communicate with Google Fonts for one reason or another.

I would start by looking through the responses here and see if any of the solutions from others sound like they might be your situation:

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: fonts.gstatic.com/s/raleway/v8/0dT.... 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…

It looks like your CSS is correct though - I would guess the issue is something outside of your CSS file.