速度提示：在 Gatsby 中使用 Typefaces.js 本地托管字体

自从我的新网站基于Gatsby上线以来，我注意到只有一件事仍然会拖慢加载时间：通过 Google Fonts 导入字体！尽管字体文件通常相对较小，但导入这些字体会导致额外访问 Google 服务器……结果，出现了轻微的加载延迟。（尤其是在网速较慢的情况下。）

Typefaces.js 简介

过去，自托管字体总是有点混乱，所以大多数人（包括我自己）都选择直接从 Google 字体导入……毕竟，这就是他们建议的！

值得庆幸的是，现在有一个更优雅的 JS 解决方案： Kyle Mathews 提供的Typefaces.js包。（没错，他是 Gatsby 的创建者之一。）假设你的网站或应用的构建过程使用了带有 CSS 和字体加载器的 Webpack，那么它使用起来会非常容易。就我而言，我想在 Gatsby 中使用它……

在 Gatsby 中使用 Typefaces.js

您只需要做以下事情：

1. 在 NPM 上找到所需字体的字体文件。

就我而言，是：Emily's Candy和Merriweather。注意：所有 Google 字体都可以在 NPM 上使用，因为 Kyle 已经通过编程添加了它们。（Font Squirrel 的字体也在开发中！）

2.通过yarn安装上述文件：

   yarn add typeface-merriweather typeface-emilys-candy

3. 删除这些字体的先前导入。

（我之前是通过 SCSS 中的 @import 导入的）

4. 将以下内容添加到gatsby-browser.js：

   require('typeface-emilys-candy');
   require('typeface-merriweather');

或者，导入您的顶级/布局组件：

   import 'typeface-emilys-candy';
   import 'typeface-merriweather';

5. 重新构建，就完成了！

整个过程总共花了大约 2 分钟，并且还节省了约 500 毫秒的移动加载时间。如果你还没有在你的 Gatsby 网站上这样做，我强烈推荐你这样做！