Next.js 13：如何用@next/font正确配置谷歌字体多字重？

问题核心 #

@next/font对谷歌字体的字重参数要求传入字符串数组，若使用数字数组会导致仅默认400字重生效，这就是你遇到字体显示偏轻的原因。

具体解决步骤 #

1. 移除旧CDN导入 #

删除./styles/global.css中的谷歌字体导入语句：

/* 删掉该行 */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");

2. 在pages/_app.tsx中正确配置字体 #

导入Poppins字体并传入字符串格式的字重数组，同时全局应用字体：

import type { AppProps } from 'next/app';
import { Poppins } from '@next/font/google';

// 配置Poppins字体，字重使用字符串数组
const poppins = Poppins({
  weight: ['400', '500', '600', '700', '800', '900'],
  subsets: ['latin'], // 根据业务需求选择字体子集
});

export default function MyApp({ Component, pageProps }: AppProps) {
  // 将字体className全局绑定到根容器
  return (
    <div className={poppins.className}>
      <Component {...pageProps} />
    </div>
  );
}

3. 验证元素字重设置 #

确保页面中需要对应字重的元素已正确设置font-weight属性，比如：

.title {
  font-weight: 700; /* 匹配配置中的700字重 */
}

备选方案：用CSS变量全局控制 #

如果习惯通过CSS管理字体，可启用variable选项：

const poppins = Poppins({
  weight: ['400', '500', '600', '700', '800', '900'],
  subsets: ['latin'],
  variable: '--font-poppins', // 定义全局CSS变量
});

在_app.tsx根元素绑定变量类名，并在global.css中设置全局字体：

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <div className={poppins.variable}>
      <Component {...pageProps} />
    </div>
  );
}

/* global.css */
body {
  font-family: var(--font-poppins);
}

内容的提问来源于stack exchange，提问作者Deri Kurniawan