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

96

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

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

Google字体

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

并设置CSS

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

但是，它不起作用。

我怎么解决这个问题？

reactjs webpack google-font-api

— 萧凯文
source

1

您将<link>放到页面标题中，而不是放到您的React应用中，对吗？您font-family是在样式表中还是在元素上直接指定其他位置？

— Timo

您是否使用https，并且有适当的安全政策？

— Stuart

实际上，我确实知道导入Google字体的正确方法是什么。我想我需要一个简单的例子。你能帮我吗？

— 萧敬腾

您的减价是什么样的？您是否正在定义其他样式，这些样式可能会覆盖更通用的样式？

— manonthemat

我已经解决了这个问题.....我之前尝试的方法是错误的。这是正确的方法。在本地使用Google字体（在hjs-webpack和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' }

— 萧敬腾

83

在某种主要或首先加载的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带有几个字体导入的a 。仅用于组织（现在我知道所有字体在哪里）。要记住的重要一点是，您首先要导入字体。

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

您可以通过一些选项来传递Google Font API，以便在加载字体等时更加高效。请参阅官方文档：Google Fonts API入门

编辑，请注意：如果要处理“脱机”应用程序，则可能确实需要下载字体并通过Webpack加载。

— 汤姆
source

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

— doobean

58

React.js中的Google字体？

打开样式表，即app.css，style.css（您的名字），没关系，只需打开样式表并粘贴此代码

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

并且不要忘记更改所需字体的URL，否则可以正常工作

并将其用作：

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

— 里三
source

用JS加载字体不是更好吗？我的意思是出于性能原因。

— 西蒙·弗兰岑

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

— doobean

21

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

— 最高
source

11

您应该看到本教程：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']
  }
});

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

— 醛糖
source

8

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

— 姆杜赖特
source

3

如果您要这样做，则为@ font-face，而Google的Font API则不需要。

— 汤姆（Tom），

但是，如果您想在css文件中定义字体，因为那是它们的归属，该怎么办？但是您仍然想利用Google的托管服务吗？那不是必须的，还是有更好的方法？

— 石头

5

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

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

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

— 德克
source

2

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

— 希瑟·阿克潘（Heather Akpan）
source

1

您不需要两个Google字体，只要@import足够stackoverflow.com/questions/48057801/…–

— Luciano，

2

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

— 杰克·泰勒
source

1

如果有人用（.less）寻找解决方案，请尝试以下方法。打开您的主文件或公共文件，并按如下所示使用。

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

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

— 杰森
source

0

这可能是在最后环节的自闭标签，请尝试：

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

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

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

— 鲁珀特
source

0

您可以通过两种不同的方式将字体添加到react应用。

添加本地字体

fonts在src文件夹中创建一个新文件夹。
在本地下载Google字体，并将其放在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;
}

添加Google字体

如果您想使用Google字体（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/）

— 西igo
source