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

Question

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

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

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

Answer 1

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

Answer 2

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

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

NextJs Google fonts issue - Only one font gets displayed

css

sass

reactjs

next.js

sanity