CODEWITHSUNDEEP
htmlreactjscreate-react-appgoogle-font-apigoogle-fonts
react-user
react-user

Reputation: 21

How to remove Google Fonts from React App?

Whenever I create a React App via the command

npx create-react-app my-app

and run the app, the header of the html file contains

<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="true">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2? 
family=Mulish:wght@200;300;400;500;600;700;800;900&amp;display=swa">

even when I am using another font which is located in the "src" folder. Why do those lines always appear and how can I remove them?

Edit: The lines from above are not included in the generated file "index.html" located in the folder "public". This is everything the header of the file contains:

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial- 
    scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta
    name="description"
    content="Web site created using create-react-app"
  />
  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>React App</title>
</head>

Edit 2: By using grep I found out that the package workbox-recipes is responsible for the Google Fonts. The problem is that other packages depend on it such as the important react-scripts. I don't know how to fix this.

Edit 3: Meanwhile I found out that the links to Google Fonts are only displayed in the Chrome Browser. They don't occur in Firefox or Edge. Also I have searched the build folder which is generated by npm run build. None of the generated files contain a string like Google or Mulish. So is the Chrome Browser itself responsible for that links? The reason why I am so concerned about this behaviour is because I live in Germany. Here you can easily receive a costly warning letter from a law firm if you don't give the user an option to reject loading fonts from Google Fonts.

Upvotes: 1

Views: 1100

Answers (2)

react-user
react-user

Reputation: 21

It seems that this was a browser specific problem and the React code is not responsible for this. So I would mark this question as answered. However, I still don't know why the Chrome browser does it.

Upvotes: 1

Mehdi Fracso
Mehdi Fracso

Reputation: 518

Look at the index.html, it has all the scripts that are loaded + the root react component.

Upvotes: 1

Related Questions