NextJS项目中Google Inter字体无法正常显示求助

开发者阿泽

2026-6-23

Next.js 中 Inter 字体不生效的修复方案

问题根源

你的代码里模板字符串语法错误：layout.tsx 中 html 和 main 标签的 className 用单引号包裹了 ${inter.variable}，导致变量没有被解析，CSS 变量 --font-inter 根本没注入到页面中。Tailwind 配置的 font-sans 找不到对应变量，就自动回退到了系统默认的衬线字体（也就是你看到的类似 Times New Roman 的字体）。

修复步骤

修正模板字符串：把 className 的单引号改成反引号，让 inter.variable 能被正确解析为 Next.js 生成的字体变量类名。
优化变量注入：只需在 html 标签上添加一次 inter.variable 即可，CSS 变量会向下继承，无需在 main 上重复添加。
可选：添加降级字体：在 Tailwind 配置里给 font-sans 加上系统无衬线字体作为 fallback，避免字体加载失败时显示异常。

修改后的代码示例

./app/layout.tsx

import './globals.css';
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { Nav } from 'components/Nav';
import { Footer } from 'components/Footer';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html 
      lang="en"
      suppressHydrationWarning={true}
      className={`${inter.variable} font-sans min-w-[360px] scroll-smooth md:overflow-x-scroll`}
    >
      <body>
        <Nav />
        <main 
          id='content'
          className='font-sans'
        >
          {children}
        </main>
        <Footer />
      </body>
    </html>
  );
}

./tailwind.config.ts（可选优化）

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
      },
    },
  },
  plugins: [],
}