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

Posted 2023-02-22

【中文标题】如何在 React.js 中使用 Google 字体？

【英文标题】：How to use Google fonts in React.js?

【发布时间】：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'

【参考方案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 就足够了 ***.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 字体，并且看起来比这里的大多数解决方案更容易。