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 (2)
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:
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.
You discover free fonts with different styles discover right at fontesdeletras.io/