Next.js 15与Tailwind CSS v4本地可变字体配置及权重失效解决

针对你遇到的可变字体显示正常但权重无变化的问题，按以下步骤排查修复：

1. 确认字体文件本身的有效性 #

• 用系统字体工具（Mac用Font Book，Windows用字体查看器）打开Satoshi-Variable.woff，检查它是否真的支持100-900的可变权重。部分字体命名带"Variable"但实际是静态字体合集，不支持权重轴变化。
• 可以用fonttools工具验证：安装后执行 ttx -t fvar Satoshi-Variable.woff，如果生成的.ttx文件包含fvar表，说明是标准可变字体；若没有，换用官方正版的Satoshi可变字体文件。

2. 修正Next.js localFont配置 #

优先提供woff2格式的可变字体，同时指定正确的格式类型，帮助浏览器识别可变特性：

import localFont from "next/font/local";

const satoshi = localFont({
  src: [
    {
      path: "./fonts/Satoshi-Variable.woff2",
      format: "woff2-variations",
    },
    {
      path: "./fonts/Satoshi-Variable.woff",
      format: "woff-variations",
    },
  ],
  variable: "--font-satoshi",
  display: "swap",
  weight: "100 900",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={satoshi.variable}>
      <body className="bg-background text-text px-24 font-satoshi">
        <main>{children}</main>
      </body>
    </html>
  );
}

注意：在body上直接添加font-satoshi类，确保全局应用该字体。

3. 修复Tailwind字体配置 #

删掉globals.css里的@theme inline配置（会和next/font生成的变量冲突），改用tailwind.config.ts注册字体：

import type { Config } from 'tailwindcss';

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        satoshi: ['var(--font-satoshi)', 'sans-serif'],
      },
    },
  },
};

export default config;

4. 验证权重应用 #

使用Tailwind字体权重类（如font-thin、font-normal、font-bold、font-black）或自定义权重类（如font-[600]）测试，同时打开浏览器开发者工具：

• 检查元素的computed样式，确认font-weight是你设置的值；
• 确认font-family显示为Satoshi（或变量解析后的字体名），而非回退的sans-serif。

5. 额外排查 #

• 清除浏览器缓存，避免旧字体文件干扰；
• 升级Next.js到最新稳定版，旧版本的next/font对可变字体的支持可能存在bug。

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