如何在 React.js 中使用 Google 字体？答案

【问题标题】：How to use Google fonts in React.js?如何在 React.js 中使用 Google 字体？
【发布时间】：2017-04-07 18:18:38
【问题描述】：

我用 React.js 和 webpack 建立了一个网站。

我想在网页中使用 Google 字体，所以我把链接放在了这个部分。

Google Fonts

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

并设置 CSS

body{
    font-family: 'Bungee Inline', cursive;
}

但是，它不起作用。

我该如何解决这个问题？

【问题讨论】：

您将<link> 放入页眉中，而不是放入您的反应应用程序中，对吗？您是否在样式表的其他任何位置或直接在元素上指定 font-family？
您使用的是 https，是否制定了安全策略？
其实我知道导入谷歌字体的正确方法是什么。我想我需要一个简单的例子。你能帮我吗...
你的降价代码是什么样的？您是否正在定义其他可能会覆盖更通用的样式？
我已经解决了这个问题.....我之前尝试的方法是错误的。这是正确的方法。 Using Google Fonts locally (in hjs-webpack and React) 但是，webpack 过程中还是有一些错误。这两行代码应该写在 webpack.config.js 文件中。 { test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

标签： reactjs webpack google-font-api

【解决方案1】：

在您的 CSS 文件（例如 create-react-app 中的 App.css）中，添加字体导入。例如：

@fontface {
  font-family: 'Bungee Inline', cursive;
  src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}

然后只需将字体添加到同一个 css 文件中的 DOM 元素。

body {
  font-family: 'Bungee Inline', cursive;
}

【讨论】：

如果你想这样做，那就是@font-face，而 Google 的 Font API 则不需要。
但是如果你想要在一个css文件中定义你的字体，因为那是它们所属的地方？但您仍想利用 Google 的托管服务？那是不是没有必要，还是有更好的办法？

【解决方案2】：

在某种主要或第一次加载 CSS 文件中，只需执行以下操作：

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

您无需包含任何类型的@font-face 等。您从 Google 的 API 获得的响应已经准备就绪，可以让您像平常一样使用字体系列。

然后在你的主 React 应用 JavaScript 中，在顶部放置如下内容：

import './assets/css/fonts.css';

我实际上做了一个app.css，它导入了一个带有一些字体导入的fonts.css。只是为了组织（现在我知道我所有的字体在哪里）。要记住的重要一点是，您首先要导入字体。

请记住，您导入到 React 应用程序的任何组件都应该在样式导入之后导入。特别是如果这些组件也导入自己的样式。这样您就可以确定样式的顺序。这就是为什么最好在主文件顶部导入字体（不要忘记检查最终捆绑的 CSS 文件以仔细检查是否有问题）。

在加载字体等时，您可以通过 Google Font API 来提高效率。请参阅官方文档：Get Started with the Google Fonts API

编辑，注意：如果您正在处理“离线”应用程序，那么您可能确实需要下载字体并通过 Webpack 加载。

【讨论】：

你能解释一下为什么在html head中使用链接的方式不起作用吗？

【解决方案3】：

它可以是链接末尾的自闭标签，试试：

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/>

并在您的 main.css 文件中尝试：

body,div {
  font-family: 'Bungee Inline', cursive;
}

【讨论】：

【解决方案4】：

React.js 中的 Google 字体？

打开你的样式表，即app.css，style.css（你有什么名字），没关系，打开样式表并粘贴这段代码

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

别忘了更改你想要的字体的 URL，否则工作正常

并将其用作：

body {
  font-family: 'Josefin Sans', cursive;
}

【讨论】：

用JS加载字体不是更好吗？我的意思是出于性能原因。
你能解释一下为什么在html head中使用链接的方式不起作用吗？
非常愚蠢，但我发现我的自定义字体不起作用，因为我输入错误如下： .body { font-family: 'Montserrat', sans-serif;当然，body 前面的额外. 意味着它是一个名为body 的CSS 类，并且没有在站点范围内应用字体系列。 *掌心。
太棒了，这就像一个魅力

【解决方案5】：

你应该看到这个教程：https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});

我刚试过这个方法，可以说效果很好;)

【讨论】：

这是一个非常好的地方！我唯一想知道的是浏览器在网络面板中的这些字体，“字体”过滤器

【解决方案6】：

我在我的 css 文件中添加了 @import 和 @font-face 并且它起作用了。

【讨论】：

谷歌字体不需要两者，@import 就足够了 stackoverflow.com/questions/48057801/…

【解决方案7】：

有同样的问题。原来我使用的是" 而不是'。

像这样使用@import url('within single quotes');

不是@import url("within double quotes");这样的

【讨论】：

【解决方案8】：

如果您使用 Create React App 环境，只需将 @import 规则添加到 index.css 中：

@import url('https://fonts.googleapis.com/css?family=Anton');

在您的主 React 应用中导入 index.css：

import './index.css'

React 让您可以选择内联样式、CSS 模块或样式化组件来应用 CSS：

font-family: 'Anton', sans-serif;

【讨论】：

【解决方案9】：

这里所有好的答案的另一个选择是 npm 包react-google-font-loader，找到here。

用法很简单：

import GoogleFontLoader from 'react-google-font-loader';

// Somewhere in your React tree:

<GoogleFontLoader
    fonts={[
        {
            font: 'Bungee Inline',
            weights: [400],
        },
    ]}
/>

然后你可以在你的 CSS 中使用姓氏：

body {
    font-family: 'Bungee Inline', cursive;
}

免责声明：我是react-google-font-loader 包的作者。

【讨论】：

【解决方案10】：

如果有人正在寻找 (.less) 的解决方案，请尝试以下操作。打开您的主文件或普通文件并使用如下所示。

@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body{
  font-family: "Open Sans", sans-serif;
}

【讨论】：

【解决方案11】：

您可以通过以下两种不同的方式将字体添加到您的 React 应用程序中。

添加本地字体

在您的 src 文件夹中创建一个名为 fonts 的新文件夹。
在本地下载谷歌字体并将它们放在fonts文件夹中。
打开您的index.css 文件并通过引用路径来包含字体。

@font-face {
  font-family: 'Rajdhani';
  src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}

这里我添加了Rajdhani 字体。

现在，我们可以像这样在 css 类中使用我们的字体了。

.title{
    font-family: Rajdhani, serif;
    color: #0004;
}

添加谷歌字体

如果你喜欢使用谷歌字体（api）而不是本地字体，你可以这样添加。

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');

同样，您也可以使用link 标签将其添加到index.html 文件中。

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

（原发于https://reactgo.com/add-fonts-to-react-app/）

【讨论】：

【解决方案12】：

在某些情况下，您的字体资源可能位于项目目录的某个位置。所以你可以使用 SCSS 像这样加载它

 $list: (
      "Black",
      "BlackItalic",
      "Bold",
      "BoldItalic",
      "Italic",
      "Light",
      "LightItalic",
      "Medium",
      "MediumItalic",
      "Regular",
      "Thin",
      "ThinItalic"
    );
    
    @mixin setRobotoFonts {
      @each $var in $list {
        @font-face {
          font-family: "Roboto-#{$var}";
          src: url("../fonts/Roboto-#{$var}.ttf") format("ttf");
        }
      }
    }
@include setRobotoFonts();

【讨论】：

【解决方案13】：

在公共文件夹内根目录的 index.html 中添加链接标记。

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/>

然后在任何 css 文件中使用它。

【讨论】：

【解决方案14】：

我可以看到在 React 应用程序中包含谷歌字体有多种不同的方式。让我们探索最首选和最佳的方式。

@import 与链接

google 字体提供的两个选项是使用link 和@import。所以现在问题指向在@import 和link 之间的决策。已经有一个 Stack Overflow question 关于这个比较，这里是来自 accepted answer 的参考

<link> 在所有情况下都优于@import，因为后者阻止并行下载，这意味着浏览器将等待导入的文件在开始下载之前完成下载其余内容。

所以，最好使用google字体提供的link标签

如何在 React 应用中使用链接以及为什么？

我很少看到将这种方法作为解决方案的答案，但我想更清楚地说明为什么它是最可取的。

使用create-react-app初始化项目后，可以在public文件夹内的index.html文件中看到如下注释。

您可以向此文件添加 webfonts、元标记或分析。构建步骤会将捆绑的脚本放入标签中。

因此，您可以简单地在上述文件的head 部分中包含谷歌字体提供的link 标签。

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

然后就可以在 CSS 文件中使用，并在 JSX 中导入

font-family: 'Bungee Inline', cursive;

【讨论】：

这是最好的答案 ^^ 确实有助于加快我的页面加载速度
@petermir 欢迎！

【解决方案15】：

如果有人需要，您可以使用 @fontsource. 他们拥有所有的 Google 字体，并且看起来比这里的大多数解决方案更容易。

【讨论】：