Next JS v13：如何使用 @next/font 添加 google 字体的字体粗细变体

Question

Next JS v13 之后，@next/font有助于获得最佳性能。@import在这个包存在之前，在我在全局 CSS 中使用 CDN google 字体之前

/* path: ./styles/global.css */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

现在我想迁移并使用@next/font@13.0.2

/* path: ./pages/_app.tsx */
import { Poppins } from "@next/font/google";

const poppins = Poppins({
  weight: "800", // I want this font-weight has 400,500,600,700,800,900
});

function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${poppins.style.fontFamily};
        }
      `}</style>

      <Component {...pageProps} />
    </>
  );
}

我一直尝试使用数组来代替：

const poppins = Poppins({
  weight: ["400", "500", "600", "700", "800", "900"],
});

但使用的字体始终只有400

在 CSS 上使用 CDN：

使用@next/font@13.0.2：

我想让 font-weight 与400,500,600,700,800,900我的 CSS 上的 CDN 类似。如何让它发挥作用并保持简单？| @next/font期待有关如何使用一次添加多个字体粗细的答案。

谢谢

Answer 1

在最新版本的 Next.js 中发布该功能之前（截至本文发布之日），不可能用数组填充权重对象。但是，当前版本的 Next.js (v13.4.x) 现在支持使用数组。

const poppins = Poppins({
  weight: ["400", "500", "600", "700", "800", "900"],
});

可用文档： https: //nextjs.org/docs/pages/api-reference/components/font