解决shadcn-ui项目中Next.js字体加载问题：Geist字体未生效的排查与修复

在基于Next.js框架构建的shadcn-ui项目中，开发者有时会遇到自定义字体无法正确加载的问题。本文将以Geist字体未生效为例，详细分析问题原因并提供解决方案。

问题现象分析

当使用shadcn-ui初始化项目并配置Geist字体后，页面文本仍然显示为系统默认字体（如Arial或Helvetica），而非预期的Geist字体。这种现象通常表明CSS变量虽然已定义但未被正确应用。

技术背景

Next.js提供了专门的字体加载优化方案，通过next/font模块可以高效加载Google字体或自定义字体。Geist作为Vercel的官方字体，可以通过这种方式引入。字体加载后会生成CSS变量，但需要开发者手动将这些变量应用到具体元素上。

问题根源

通过分析问题描述，我们可以发现两个关键点：

1. 项目初始化时选择了不启用CSS变量主题功能
2. 全局样式文件(globals.css)中直接硬编码了字体族设置

这种配置导致了以下问题链：

• 虽然通过next/font正确加载了Geist字体并生成了CSS变量
• 但全局样式中的硬编码覆盖了这些变量
• 最终浏览器使用了后备字体而非Geist

解决方案

正确的修复方式是将全局样式中的字体声明修改为使用CSS变量：

body {
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
}

这种写法具有以下优势：

1. 首先尝试使用Geist字体变量
2. 当变量不可用时回退到系统字体
3. 保持了良好的字体加载降级策略

最佳实践建议

在shadcn-ui项目中处理字体时，建议遵循以下原则：

1. 统一管理字体变量：在布局文件中集中定义所有字体变量
2. 合理设置回退：为CSS变量设置适当的系统字体回退链
3. 避免硬编码：不在样式表中直接写入具体字体名称
4. 性能优化：利用Next.js的字体优化功能，避免额外网络请求

总结

字体加载问题在前端项目中较为常见，特别是在使用CSS-in-JS和现代框架时。通过理解Next.js的字体加载机制和CSS变量应用原理，开发者可以快速定位并解决类似问题。shadcn-ui作为一套高质量组件库，与Next.js深度集成，正确配置后能够提供优秀的排版体验。

记住，当遇到字体不生效的情况时，首先检查CSS变量是否正确定义和应用，这是解决此类问题的关键切入点。