自托管字体不适用于 Next.js

Question

我想要什么，我想知道什么

我想在 Next.js 应用程序中使用自托管字体

我已经尝试过的

https://i.stack.imgur.com/AuIwB.png

https://i.stack.imgur.com/P6ekH.png

结果

在这两种情况下，CSS 只识别最后一个字体

重要

我的粗体、中体、斜体和常规字体是单独的文件，它们都是 woff2 格式。 我已经尝试对每个文件（粗体、常规和中等）使用不同的 @font-face 并命名每个文件，它有效，但我认为可能是一种更有效的方式

Answer 1

您需要为每种样式添加一个@font-face（包括粗体和斜体版本）。
font-family 名称应保持不变！
否则样式将无法正确映射到特定的字体文件。

目前，您只是覆盖了您的第一个 url——“Metropolis-Medium.woff2”根本不会被加载，因为它已被“Metropolis-Bold.woff2”取代。

多个 URL 可用于后备格式（例如 woff2、woff2、ttf 等）

如果没有任何 font-weight 值，浏览器会将家族名称“Metropolis”映射到“Metropolis-Bold.woff2”文件和常规字体粗细（或 400）。

为了更好的兼容性，您应该使用更详细的规则，如下所示：
（虽然有些浏览器可能更宽容）

@font-face {
  font-family: Metropolis;
  font-weight: 400;
  font-style: normal;
  src: url("../../../public/fonts/metropolis/Metropolis-Regular.woff2")
      format("woff2"),
    url("../../../public/fonts/metropolis/Metropolis-Regular.woff")
      format("woff");
}

@font-face {
  font-family: Metropolis;
  font-weight: 400;
  font-style: italic;
  src: url("../../../public/fonts/metropolis/Metropolis-Italic.woff2")
      format("woff2"),
    url("../../../public/fonts/metropolis/Metropolis-Italic.woff")
      format("woff");
}

@font-face {
  font-family: Metropolis;
  font-weight: 500;
  font-style: normal;
  src: url("../../../public/fonts/metropolis/Metropolis-Medium.woff2")
      format("woff2"),
    url("../../../public/fonts/metropolis/Metropolis-Medium.woff")
      format("woff");
}

@font-face {
  font-family: Metropolis;
  font-weight: 700;
  font-style: normal;
  src: url("../../../public/fonts/metropolis/Metropolis-Bold.woff2")
      format("woff2"),
    url("../../../public/fonts/metropolis/Metropolis-Bold.woff") format("woff");
}

body {
  font-family: Metropols, sans-serif;
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}