在create-react-app构建中完全包含Google网络字体（不弹出）

Question

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

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

Answer 1

有多种方法。

1。导入字体

例如，要使用Roboto，请执行

yarn add typeface-roboto

或

npm install typeface-roboto --save

在index.js中：

import "typeface-roboto";

有npm软件包，可用于许多开源字体和大多数Google字体。您可以看到所有字体here。所有软件包均来自该project。

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中进行这些操作。这是您的偏好。

Answer 2

这个答案是@sudo bangbang答案的更新版本

1.从谷歌字体手动下载文本包

前往您希望在 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 repo directory.