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

问题描述

我正在将 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 时，它们似乎不起作用。该网页显示默认浏览器字体。我该如何解决这个问题？

解决方法

下载字体。它会下载太多的变化。选择你想要的并将它们复制到“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";

,

下载字体系列，我个人喜欢通过 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