Next.js 14.2.13字体无法应用问题求助

问题1：page.tsx 中使用 montserrat.className 字体未生效 #

排查与修复步骤 #

1. 检查 fonts.ts 定义是否规范
   必须为字体声明 variable 属性，这是注入全局CSS变量和确保类名生效的关键：

   // ./app/fonts.ts
   import { Montserrat, Open_Sans } from 'next/font/google';
   
   export const montserrat = Montserrat({
     subsets: ['latin'],
     variable: '--font-montserrat', // 必须定义该字段
     weight: ['400', '700'] // 按需指定字重，可选
   });
   
   export const openSans = Open_Sans({
     subsets: ['latin'],
     variable: '--font-open-sans',
   });
   

2. 修正 layout.tsx 的body类名引用
   需将字体的 variable 类添加到body，而非直接用 className，这样才能全局注入CSS变量，同时单个元素的 className 才能生效：

   // ./app/layout.tsx
   import { montserrat, openSans } from './fonts';
   import './globals.css';
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <body className={`${montserrat.variable} ${openSans.variable}`}>
           {children}
         </body>
       </html>
     );
   }
   

3. 验证 page.tsx 的使用方式
   确保正确导入并使用字体类名：

   // ./app/page.tsx
   import { montserrat } from './fonts';
   
   export default function Home() {
     return (
       <main>
         <h1 className={montserrat.className}>This text uses Montserrat</h1>
       </main>
     );
   }
   

问题2：全局样式 globals.css 中字体CSS变量报错（ESLint警告+浏览器提示未定义） #

排查与修复步骤 #

1. 确保CSS变量已全局注入
   先确认 fonts.ts 已定义 variable 属性，且 layout.tsx 的body上已添加对应 variable 类（参考问题1的配置），这是变量能被全局访问的前提。

2. 解决ESLint警告
   可以通过两种方式处理：

   • 在使用变量的CSS代码上方添加注释忽略警告：

     /* eslint-disable-next-line no-undef */
     body {
       font-family: var(--font-montserrat), sans-serif;
     }
     

   • 在项目根目录的 .eslintrc.json 中全局关闭相关规则：

     {
       "rules": {
         "no-undef": "off"
       }
     }
     

3. 适配Tailwind CSS（若使用）
   若项目依赖Tailwind，需在 tailwind.config.ts 中扩展字体族，确保Tailwind能识别变量：

   // tailwind.config.ts
   import type { Config } from 'tailwindcss';
   
   const config: Config = {
     content: [
       './pages/**/*.{js,ts,jsx,tsx,mdx}',
       './components/**/*.{js,ts,jsx,tsx,mdx}',
       './app/**/*.{js,ts,jsx,tsx,mdx}',
     ],
     theme: {
       extend: {
         fontFamily: {
           montserrat: ['var(--font-montserrat)', 'sans-serif'],
           opensans: ['var(--font-open-sans)', 'sans-serif'],
         },
       },
     },
     plugins: [],
   };
   export default config;
   

额外检查项 #

确认 tsconfig.json 的路径配置正确，避免因导入路径错误导致字体未加载：

{
  "compilerOptions": {
    // 其他配置...
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

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