NextJs Google 字体问题 - 只显示一种字体答案

【问题标题】：NextJs Google fonts issue - Only one font gets displayedNextJs Google 字体问题 - 只显示一种字体
【发布时间】：2021-06-10 18:54:04
【问题描述】：

我正在将 Google 字体链接连接到 NextJs 应用程序的 _app.js 文件中的 HEAD 部分。该链接包含两种字体。

https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Poppins:wght@400;700&display=swap

但是，当我在模块的 sass 文件中提到 font-family 时，它们似乎不起作用。网页显示默认浏览器字体。我该如何解决这个问题？

【问题讨论】：

标签： css reactjs sass next.js sanity

【解决方案1】：

下载字体系列，我个人喜欢通过transfonter.org 运行它们，以使它们也与浏览器兼容。勾选以下方框：

TTF
EOT
WOFF
WOFF2

下载后，它将为您提供带有@font-face 样式表的所有字体，该样式表将为您处理不同的字体声明，然后修复您的文件路径。

@font-face {
  font-family: 'Badhorse';
  src: url('../../assets/fonts/Badhorse-Regular.eot');
  src: url('../../assets/fonts/Badhorse-Regular.eot?#iefix')
      format('embedded-opentype'),
    url('../../assets/fonts/Badhorse-Regular.woff2') format('woff2'),
    url('../../assets/fonts/Badhorse-Regular.woff') format('woff'),
    url('../../assets/fonts/Badhorse-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

 font-family: "Badhorse", san-serif; // ensure fallback system fonts

【讨论】：

我选择上面提到的4种——不同的浏览器需要不同的字体类型文件。如果你像上面的例子一样加载它们，用户浏览器将能够要求他们需要的特定字体文件
这里有一张漂亮的图片，向您展示了字体类型及其在浏览器上的功能creativemarket.com/blog/the-missing-guide-to-font-formats
我需要更多关于字体使用方面的帮助。你介意我在 Twitter 上关注你吗？
来吧，给我一个收件箱@OliverHeward :)

【解决方案2】：

下载字体。它会下载太多变体。选择你想要的并将它们复制到“public/fonts”目录。

然后在 main.scss（或部分）中，像这样使用它：

@font-face {
  font-family: "PressStart2P";
  src: url("/fonts/PressStart2P-Regular.ttf");
  font-weight: normal;
  font-style: italic;
}

现在您可以在 scss 中使用这个系列，如下所示：

font-family: "PressStart2P";

【讨论】：