NextJS配置Google Font不生效，网站未加载显示对应字体如何解决

• 仅完成了Google Font资源引入，未完成Tailwind CSS侧的字体配置与应用步骤，Tailwind默认自带的字体优先级更高，会覆盖未声明的外部字体
• 未将Almarai字体注册到Tailwind的字体配置中，无法通过Tailwind类名调用该字体

1. 注册自定义字体到Tailwind配置
   打开项目根目录下的tailwind.config.js文件，扩展字体家族配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        // 注册Almarai字体，后面配置无衬线字体作为兜底
        almarai: ['Almarai', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

2. 应用自定义字体
   如果需要全局生效，打开项目全局样式入口文件（通常为styles/globals.css），新增base层配置：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply font-almarai;
  }
}

如果仅需要局部使用该字体时，直接在对应元素上添加font-almarai类名即可。

打开浏览器开发者工具：

• 网络面板检查Google Font对应的资源是否加载成功，无拦截、跨域等报错
• 元素面板查看对应元素的计算样式，确认font-family属性已包含Almarai

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