在不弹出的情况下完全包含Google网页字体在create-react-app构建中

Question

我需要在使用create-react-app构建的React Web应用程序中包含Google Web字体。这是因为该应用程序将在没有Internet访问权限的wifi上提供。最直接的解决方案似乎是google-fonts-webpack-plugin，但它需要自定义webpack配置。

是否有任何“简单”的解决方案可以自动下载和包含所有Web字体资源，而无需弹出create-react-app？

- code_onkel

---

为什么不把它放在公共字体中，然后使用 @font-face CSS 访问它呢？ - illiteratewriter

我目前在我的App.css中使用@import url('https://fonts.googleapis.com/...')，但是webpack不会将字体文件拉入构建中。你的意思是将该导入的内容复制到我的CSS文件中，webpack会将woff文件等包含在构建中？ - code_onkel

你可以将它们下载为开放类型字体。下载并将它们放入公共文件夹，然后使用 @import url('public...') 导入它，无论相对 URL 是什么。 - illiteratewriter

Answer 1

有多种方法可以做到这一点。

1. 导入字体

例如，要使用Roboto，请执行以下操作：

yarn add typeface-roboto

或者

npm install typeface-roboto --save

在 index.js 文件中：

import "typeface-roboto";

有许多npm软件包可用于许多开源字体和大多数Google字体。您可以在此处查看所有字体。所有软件包均来自该项目。

2. 手动下载字体并将其添加到样式表中

您可以从fonts.google.com下载字体。

现在，您可以将字体放在src/fonts/Lato.woff中，并在您的index.css中使用它。

@font-face {
    font-family: 'Lato';
    src: local('Lato'), url(./fonts/Lato.woff) format('woff');
}

对于ttf字体，应该将truetype作为参数传递给格式，而不是ttf

您可以将其导入到您的index.js中使其可用

import './index.css';

你可以在 App.css 和 App.js 中进行这些操作，这取决于你的个人喜好。

- sudo bangbang

---

警告：解决方案＃1仅支持拉丁字体版本。（2019/04） - Matěj Kříž

Answer 2

这篇回答是@sudo bangbang的回答的更新版本。

1. 手动从Google Font下载字体包

进入你想要在CSS中应用的任何字体，点击Download family按钮获取ZIP文件。

解压缩ZIP文件并将文件夹移动到如下所示的src文件夹中。

之后，参考下面的代码，将src修改为正确的URL并放置在正确的format中。这里我使用了truetype，基于MDN。

可用的类型有："woff"、"woff2"、"truetype"、"opentype"、"embedded-opentype"和"svg"。

font-family属性是自定义名称。您可以随意命名。

@font-face {
  font-family: 'primary-font';
  src: url(./fonts//Sriracha/Sriracha-Regular.ttf) format('truetype');
}

.primary-font {
  font-family: primary-font;
}

2. 安装@fontsource包

由于Typefaces项目已被弃用，我们可以使用同一作者的另一种替代包FontSource

以Poppins为例，首先下载该包。

npm install @fontsource/poppins --save

接下来在你的index.js文件中导入该包

import "@fontsource/poppins";

然后按照您的需求使用它

.primary-font {
  font-family: "Poppins";
}

支持的字体列表在这个Github目录库中。

- Sprint

---

很好的回答，你能在npm install '@fontsource/poppins --save'之前加上'@'吗？因为这是必需的，可能会帮助到其他人。 - Abhishek Soni

当然，谢谢你指出来 :) - Sprint