我用React.js和webpack建立了一个网站。
我想在网页中使用谷歌字体，所以我把链接放在了部分。
谷歌字体
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
并设置 CSS
body{
font-family: 'Bungee Inline', cursive;
}
但是，它不起作用。
我怎么解决这个问题？
如何在 React.js 中使用 Google 字体？
IT技术
reactjs
webpack
google-font-api
2021-03-23 04:06:13
6个回答
在某种主要或第一次加载 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 以在加载字体等时更高效。请参阅官方文档：Google Fonts API 入门
编辑，注意：如果您正在处理“离线”应用程序，那么您可能确实需要下载字体并通过 Webpack 加载。
React.js 中的 Google 字体？
打开你的样式表，即app.css，style.css（你有什么名字），没关系，只要打开样式表并粘贴这段代码
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
并且不要忘记更改您想要的字体的 URL，否则工作正常
并将其用作：
body {
font-family: 'Josefin Sans', cursive;
}
如果您正在使用 Create React App 环境，只需将 @import 规则添加到index.css如下：
@import url('https://fonts.googleapis.com/css?family=Anton');
在你的主要 React 应用程序中导入index.css：
import './index.css'
React 为您提供了内联样式、CSS module或样式化组件的选择，以便应用 CSS：
font-family: 'Anton', sans-serif;
你应该看到这个教程：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 文件中，例如 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;
}