Next.js项目使用Inter可变字体无法设置字重的问题咨询

你遇到的问题是因为next/font/google的Inter默认只加载单一字重的静态字体，而非可变字体，导致设置其他字重时触发fallback字体。以下是修复步骤：

1. 配置Inter加载可变字体 #

修改Inter的初始化配置，明确指定可变字体支持的字重范围（Inter可变字体支持300-900的字重）：

const inter = Inter({
  subsets: ["latin"],
  // 指定可变字体覆盖的字重范围
  weight: ['300', '400', '500', '600', '700', '800', '900'],
  // 可选：定义CSS变量，方便全局引用
  variable: '--font-inter',
});

2. 正确全局应用字体 #

将字体变量挂载到根元素上，确保全局生效：

export default function App({ Component, pageProps }: AppProps) {
  const title = "App title";

  return (
    <>
      <Head>
        <title>{title}</title>
        <meta name="description" content="description" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      {/* 将字体变量应用到根容器 */}
      <div className={inter.variable}>
        <Layout>
          <style jsx global>{`
            html {
              font-family: var(--font-inter);
            }
          `}</style>

          <main className={`${styles.main}`}>
            <Component {...pageProps} />
          </main>
        </Layout>
      </div>
    </>
  );
}

3. 排查其他冲突 #

• 检查globals.css中是否有全局font-family设置，避免覆盖next/font注入的字体
• 查看浏览器网络请求，确认是否加载了Inter可变字体文件（通常文件名包含variable或full标识）

完成上述修改后，你设置的不同字重（如font-weight: 600）应该会正常生效，不再触发fallback字体。

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