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

在 CSS 文件中，比如 create-response-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;
}

在某种主要的或第一次加载的 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';

我所做的实际上是一个导入了一个 fonts.css和一些字体导入的 app.css。只是为了组织(现在我知道我所有的字体在哪里)。重要的是要记住首先导入字体。

请记住，您导入到 React 应用程序的任何组件都应该在样式导入之后导入。特别是如果这些组件也导入它们自己的样式。这样您就可以确定样式的顺序。这就是为什么最好在你的主文件的顶部导入字体(不要忘记检查你最后捆绑的 CSS 文件，如果你有麻烦再检查一遍)。

有一些选项，你可以通过谷歌字体 API，以更有效地加载字体等。见官方文件: 开始使用 Google 字体 API

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

它 可以是链接末尾的自我关闭标签，试试:

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

在 main.css 文件中尝试:

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

在 React.js 中使用谷歌字体？

打开你的样式表，例如 app.css，style.css (你有什么名字) ，没关系，只要打开样式表并粘贴这段代码

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

并且不要忘记更改您想要的字体的 URL，否则工作正常

用这个作为:

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

你应该看看这个教程: 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']
}
});

我刚刚尝试了这种方法，我可以说它非常有效;)

我在我的 css 文件中添加了@import 和@font-face，它工作了。

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

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

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

如果您正在使用 Create React App 环境，只需将@import 规则添加到 Index.css:

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

导入 Index.css在您的主反应应用程序:

import './index.css'

React 为您提供内联样式、 CSS 模块或样式组件的选择，以便应用 CSS:

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

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

用法很简单:

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包的作者。

如果有人寻找一个解决方案(。少)尝试下面。打开主文件或普通文件，使用如下。

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


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

这里有两种不同的方式，你可以添加字体到您的反应应用程序。

添加本地字体

1. 在 src文件夹中创建一个名为 fonts的新文件夹。

2. 在本地下载谷歌字体并将它们放在 fonts文件夹中。

3. 打开 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;
}

添加 Google 字体

如果你喜欢使用谷歌字体(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/)

在某些情况下，字体资源可能位于项目目录中的某个位置。 所以您可以像这样使用 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();

在公用文件夹的根目录的 index.html 中添加 link 标记。

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

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

我可以看到有各种不同的方式，包括谷歌字体在反应应用程序。让我们来探索一下最优选的方法。

@ import vs link

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

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

因此，最好使用 google font 提供的 link标签

如何使用链接，为什么在一个反应应用程序？

我没有看到几个答案给出这种方法作为一个解决方案，但我想更清楚地说明为什么它是最可取的。

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

您可以向该文件添加 字体、 meta 标记或分析。构建步骤将把绑定的脚本放入标记中。

因此，您可以简单地包括 link标记，谷歌字体提供的 head节的上述文件。

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

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

font-family: 'Bungee Inline', cursive;

如果有人需要它，你可以使用 @ fontsource.他们有所有的谷歌字体，似乎比这里的大多数解决方案更容易。

编辑 index.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");


body {
margin: 0;
font-family: "Poppins", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}