8

I need to include a Google web font in the build of a React webapp using create-react-app. This is, because the app will be served on a wifi without internet access. The most straightforward solution seems to be google-fonts-webpack-plugin, but it needs a customized webpack config.

Is there any "simple" solution that downloads and includes all the web font resources automagically without the requirement to eject from create-react-app?

4

2 回答 2

14

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

1.导入字体

例如，要使用 Roboto，请执行

yarn add typeface-roboto

或者

npm install typeface-roboto --save

在 index.js 中：

import "typeface-roboto";

许多开源字体和大多数 Google 字体都有 npm 包。你可以在这里看到所有的字体。所有的包都来自那个项目。

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

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

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。这是你的偏好。

于 2018-09-18T18:12:21.837 回答
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 目录中。

于 2021-02-09T10:10:16.123 回答