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

Question

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

我想在网页中使用Google字体,因此我将链接放在该部分中.

谷歌字体

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

并设置CSS

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

但是,它不起作用.

我怎么解决这个问题？

Answer 1

在某种主要或第一个加载CSS文件中,只需:

app.css

您不需要包装任何类型的@ font-face等.您从Google的API中获得的响应已准备就绪,并允许您像平常一样使用字体系列.

然后在你的主要React应用程序JavaScript中,在顶部放置如下内容:

fonts.css

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

请记住,导入到React应用程序的任何组件都应在导入样式后导入.特别是如果这些组件也导入自己的样式.这样您就可以确定样式的顺序.这就是为什么最好在主文件的顶部导入字体(不要忘记检查你的最终捆绑的CSS文件,以仔细检查你是否遇到麻烦).

您可以通过Google Font API提供一些选项,以便在加载字体等时更加高效.请参阅官方文档:https://developers.google.com/fonts/docs/getting_started

编辑,注意:如果您正在处理"离线"应用程序,那么您可能确实需要下载字体并通过Webpack加载.

Answer 2

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

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

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

并将其用作:

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

Answer 3

如果您正在使用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;

Answer 4

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

添加本地字体

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

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;
}

添加谷歌字体

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

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

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

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

（最初发布在https://reactgo.com/add-fonts-to-react-app/）

Answer 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']
  }
});

我只是尝试了这种方法，我可以说它很好用;）

Answer 6

这里所有好的答案的另一个选择是 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。

Answer 7

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

@导入与链接

谷歌字体提供的两个选项是使用link和@import。所以现在的问题是在@import和之间做出决定link。已经有一个关于此比较的堆栈溢出问题，这里是来自已接受答案的参考

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

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

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

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

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

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

因此，您只需在上述文件的部分中包含linkgoogle font 提供的标签即可。head

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

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

font-family: 'Bungee Inline', cursive;

Answer 8

编辑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;
}

Answer 9

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

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

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

Answer 10

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

Answer 11

在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;
}