Next.js+Tailwind CSS多字体配置失效问题求助

问题原因 #

你定义了Tulpen_One字体的CSS变量--font-tulpen，但未将这个变量注入全局DOM环境，导致Tailwind的font-cursive类无法找到对应字体变量，特定<h3>标签无法应用目标字体。

修复步骤 #

修改layout.tsx的根HTML元素，把Tulpen_One的字体变量添加到<html>标签的className中：

import './globals.css'
import type { Metadata } from 'next'
import { Nunito_Sans, Tulpen_One } from 'next/font/google'

const nunito_sans = Nunito_Sans({ subsets: ['latin'] })

const tulpen_one = Tulpen_One({
  weight: '400',
  subsets: ['latin'],
  variable: '--font-tulpen',
})

export const metadata: Metadata = {
  title: 'Name | Portfolio',
  description: 'moto',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={tulpen_one.variable}>
      <body className={nunito_sans.className}>{children}</body>
    </html>
  )
}

生效逻辑 #

• tulpen_one.variable会生成包含--font-tulpen变量的CSS类，注入全局后，Tailwind配置中fontFamily.cursive: ['var(--font-tulpen)']就能正确关联到Tulpen_One字体。
• 全站文本通过<body>上的nunito_sans.className默认应用Nunito Sans字体，特定<h3>标签通过font-cursive类覆盖为Tulpen_One字体，两者互不冲突。

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