NextJS 14.2.3 无法在body上应用Google字体Rajdhani求助

1. 用Next.js内置Font优化工具导入字体 #

Next.js 13+ 提供的next/font能自动处理字体预加载和全局注入，比手动加link标签更可靠：

// app/layout.js
import { Rajdhani } from 'next/font/google';
import './globals.css';

// 配置Rajdhani字体，按需选择权重
const rajdhani = Rajdhani({
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-rajdhani', // 定义全局CSS变量
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={rajdhani.variable}>
      <body>{children}</body>
    </html>
  );
}

2. 全局CSS绑定字体变量 #

打开globals.css，修改body的字体配置，确保优先级正确：

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-rajdhani), sans-serif; /* 加后备字体防止加载失败 */
  /* 删除或注释掉之前可能冲突的monospace相关设置 */
}

3. 解决Tailwind样式冲突（如果使用） #

如果Tailwind默认字体覆盖了全局设置，在tailwind.config.js中配置自定义字体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        rajdhani: ['var(--font-rajdhani)', 'sans-serif'],
      },
    },
    // 可选：把Rajdhani设为默认sans-serif字体
    fontFamily: {
      sans: ['var(--font-rajdhani)', 'sans-serif'],
    },
  },
  plugins: [],
};

4. 排查优先级问题 #

用浏览器开发者工具检查body元素的Computed样式，查看font-family的最终生效值：

• 如果看到其他字体（比如Times New Roman）排在前面，说明有更高优先级的CSS规则覆盖，找到对应的选择器并调整，或者给body的font-family加!important临时排查（不推荐长期使用）

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