Next.js项目导入自定义字体后Tailwind CSS失效问题求助

排查步骤与解决方案 #

1. 确认字体加载状态 #

打开浏览器开发者工具（F12），进入网络标签，筛选「字体」类型，刷新页面查看Great Vibes等字体是否成功加载：

• 若字体未加载：检查globals.css中的Google Fonts链接是否存在拼写错误，可手动访问链接确认资源可正常获取。
• 若字体加载成功但未生效：查看元素的computed样式，确认font-family是否被正确设置为Great Vibes, cursive，排查是否有其他样式覆盖。

2. 修正背景图路径问题 #

你的背景图路径../assets/images/slidingimage.jpg在Next.js App Router模式下可能存在路径错误，Next.js要求public目录下的资源通过根路径访问：

• 将tailwind.config.js中的背景图路径修改为：

  "sliding-image": "url('/assets/images/slidingimage.jpg')",
  

  确保assets目录放在项目根目录的public文件夹下。

3. 使用Next.js官方字体加载方案（推荐） #

Next.js的next/font模块可优化字体加载，避免网络延迟或跨域问题，同时自动处理缓存：

1. 安装依赖：

   npm install @next/font
   

2. 在app/layout.jsx中配置字体：

   import { Great_Vibes, Abhaya_Libre, Cormorant, Roboto } from '@next/font/google';
   
   const greatVibes = Great_Vibes({ 
     subsets: ['latin'],
     variable: '--font-greatvibes'
   });
   const abhayaLibre = Abhaya_Libre({ 
     subsets: ['latin'],
     weight: ['400', '500', '600'],
     variable: '--font-abhaya'
   });
   const cormorant = Cormorant({ 
     subsets: ['latin'],
     weight: ['400', '500', '600'],
     variable: '--font-cormorant'
   });
   const roboto = Roboto({ 
     subsets: ['latin'],
     weight: ['400', '500', '700'],
     variable: '--font-roboto'
   });
   
   export default function RootLayout({ children }) {
     return (
       <html lang="en" className={`${greatVibes.variable} ${abhayaLibre.variable} ${cormorant.variable} ${roboto.variable}`}>
         <body>{children}</body>
       </html>
     );
   }
   

3. 更新tailwind.config.js的字体配置：

   fontFamily: {
     satoshi: ["Satoshi", "sans-serif"],
     inter: ["Inter", "sans-serif"],
     abhaya: ["var(--font-abhaya)", "serif"],
     cormorant: ["var(--font-cormorant)", "serif"],
     greatvibes: ["var(--font-greatvibes)", "cursive"],
     roboto: ["var(--font-roboto)", "sans-serif"],
   },
   

4. 移除globals.css中的Google Fonts导入语句。

4. 清除浏览器缓存 #

强制刷新页面（Ctrl+Shift+R / Cmd+Shift+R），清除浏览器缓存的旧CSS或字体资源，加载最新样式。

5. 检查Tailwind内容范围配置 #

确认tailwind.config.js的content数组包含所有使用该字体的文件路径，当前配置已覆盖pages、components、app目录，若有其他目录使用字体需补充添加。

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