如何在 React JS 中使用 Google Fonts API？答案

【问题标题】：How to use Google Fonts API in React JS?如何在 React JS 中使用 Google Fonts API？
【发布时间】：2020-08-10 22:05:15
【问题描述】：

我正在尝试在我的 React 项目中设置 Google 字体，但我无法覆盖 React 的原始字体系列。

按照一些教程，我将我想要的字体系列插入index.css：

body {
  /* margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Lemonada'
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
  font-family: 'Lemonada', 
    cursive;
}

出于测试目的，我对原始字体进行了注释。

但是原始字体没有被覆盖：

如果我检查文件，我会看到：

正如您所见，所有注释字体仍然存在，除了index.css 中不存在的许多其他内容。显然它来自某个style.css 文件，但我不知道在哪里可以找到它。

如果我取消选中此样式，我会得到我想要的字体系列：

当然，我还将 api 添加到我的 index.html 文件中。

<link href="https://fonts.googleapis.com/css2?family=Lemonada:wght@300&display=swap" rel="stylesheet">

我希望能够添加新的字体系列或至少覆盖原来的字体系列。

我做错了什么？

【问题讨论】：

标签： css reactjs styles google-fonts

【解决方案1】：

确保 <link href="https://fonts.googleapis.com/css2?family=Lemonada:wght@300&display=swap" rel="stylesheet"> 在您的 css 文件之前加载。

也尝试将行更改为

  font-family: 'Lemonada' !important,

【讨论】：

【解决方案2】：

我不断挖掘，发现了两种可能的解决方案：

1-我没有使用index.css，而是将font-family直接放在了我要使用字体的组件对应的css文件中，在这种情况下这是Layout.css文件。

2-我发现了这个库，它也可以工作而且看起来非常棒：https://www.npmjs.com/package/react-google-font-loader

【讨论】：