Next.js 15 + Tailwind CSS 4 本地自定义字体加载配置求助

步骤1：确认本地字体的localFont配置 #

先检查layout.tsx的配置，确保字体路径正确，且CSS变量已挂载到body上：

// ./src/app/layout.tsx
import localFont from 'next/font/local'
// 若使用Geist字体需先导入，否则删除相关变量
import { GeistSans, GeistMono } from 'geist/font'

const dinround = localFont({
  src: [
    {
      path: '../../public/fonts/DIN Round Pro/dinroundpro.otf'
    }
  ],
  variable: '--font-dinround'
})

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${GeistSans.variable} ${GeistMono.variable} ${dinround.variable} antialiased`}>
        {children}
      </body>
    </html>
  );
}

步骤2：在Tailwind CSS v4中注册字体族 #

Tailwind v4通过@theme块在globals.css中配置自定义主题，你需要在这里将字体变量映射为Tailwind可用的字体类：

/* ./src/styles/globals.css */
@import "tailwindcss";

@plugin "daisyui" {
  themes: light --default, dark;
  root: ":root";
  logs: true;
}

@theme {
  fontFamily: {
    // 注册自定义字体类，可通过`font-dinround`类直接使用
    dinround: 'var(--font-dinround)',
    // 若要将该字体设为全局默认无衬线字体，替换sans的默认值
    sans: 'var(--font-dinround)',
  };
}

步骤3：使用字体 #

• 按需使用：给目标元素添加font-dinround类即可应用该字体
• 全局使用：若已在@theme中将sans设为该字体，项目中所有默认无衬线文本会自动使用DIN Round Pro

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