在React项目中测试不同的字体

Question

问题

如何在React项目中快速测试不同字体？

概述

我正在学习如何使用ReactGatsby，并通过这个。模板. 在这个例子中，该网站使用 .sass 文件进行造型，我看到 font-family: "slick" 中提到的。slider.sass 档和 reset.sass 文件中有此条目。

body
  font-family: Roboto, Helvetica, Arial, sans-serif
  font-size: 16px

理想的结果

我希望在这个项目和其他项目中，尽快地尝试许多不同的字体组合。

例如，我想尝试将所有的字体都改成像以下这样的字体这个用于标题和这个其他的一切。

我看了什么？

我看了这是盖茨比创始人凯尔-马修斯说的但我猜测它将会与这个例子中当前的sass配置发生冲突。

我还看到变量可以和sass一起使用，并且有可能用于测试这个项目中的不同字体，但我不确定到底如何使用。

Answer 1

让我用一个警告来开启我的答案。

声明：我不建议在生产中这样做。这是为了在本地测试字体搭配。

一旦你选择了你的字体，我建议将webfonts托管在你的域名上，以避免打到远程CDN。你可以使用经典的 @font-face 声明，或凯尔-马修的 typefaces 包裹比如说。

现在，你基本上要做的是在客户端导入字体，以便在不重建网站的情况下轻松试用。

1. 获取一个客户端嵌入字体的链接

首先，你需要从你的字体托管CDN（在你的例子中，从Google Fonts）获得一个嵌入链接。它将看起来像这样。

https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat

要在您的Gatsby网站上嵌入链接，您有两种选择。

使用 <link>
您可以将字体添加到您的Gatsby应用程序中，作为一个新的字体。外部客户端包. 您通常会选择定制html.js，或使用 react-helmet.
在你的情况下。我看到这里该 react-helmet 已经内置在你正在使用的启动器中，所以你需要更新 layout.js 像这样。
```
<HelmetDatoCms
  favicon={data.datoCmsSite.faviconMetaTags}
  seo={data.datoCmsHome.seoMetaTags}
>
  <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
```
检查一下... 的README gatsby-source-datocms 阅读更多关于 HelmetDatoCms 组成部分
使用 @import
你可以用CSS（或SASS）导入一个远程字体。
```
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
```
这已经在你的启动器中使用了，导入是在 reset.sass. 你只需要更新URL，其中包括你想尝试的字体。

在你的情况下，我推荐第二种方案。你只需要编辑一个文件，这将使测试几种字体的速度更快。

第三，不管你是否选择了 <link> 或 @import 选项，你需要更新你的CSS来使用你导入的字体。正如你在问题中已经提到的。此一时彼一时.

你会想要这样的东西。

body {
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3 {
  font-family: 'Great Vibes', cursive;
}