Question

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

然而，它不起作用。

我该如何解决这个问题？

Answer 1

在某种主要或第一个加载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来提高效率。请参阅官方文档：https://developers.google.com/fonts/docs/getting_started

编辑，注意：如果您正在处理＆＃34;离线＆＃34;应用程序，那么你可能确实需要下载字体并通过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

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

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

有同样的问题。事实证明我使用的是"而不是'。

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

不是@import url("within double quotes");喜欢这个

Answer 7

有两种方法可以将字体添加到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/）

Answer 8

我在我的css文件中添加了@import和@ font-face，但它运行良好。

Answer 9

这里所有好的答案的另一个选择是here中找到的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 10

如果任何人希望使用（.less）解决方案，请尝试以下方法。打开您的主文件或通用文件，并按如下所示使用。

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

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

Answer 11

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

Answer 12

可能是最后链接的自动关闭标记，请尝试：

getOneDSliders(): void {
  this.simXService.getOneDSliders()
    .then(sliders => {
      this.onedsliders = sliders;
    });
}

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

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

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

Google Fonts

并设置CSS

12 个答案:

添加本地字体

添加Google字体