Next.js+Shadcn UI项目：如何确保Vercel部署与本地字体一致？

确实有不少开发者碰到过这类问题——哪怕字体配置看起来完全一致，Vercel部署后的字体显示还是和本地开发环境有差异。下面是具体的排查和解决步骤：

• 检查字体预加载与加载策略

  • 确认在layout.tsx里正确用Next.js的next/font组件预加载字体，比如Google Fonts的用法：

    import { Inter } from 'next/font/google';
    const inter = Inter({ subsets: ['latin'], display: 'swap' });
    

  • 务必把display属性设为swap或fallback，避免Vercel部署时因字体加载慢，临时显示系统 fallback 字体，而本地因为缓存了字体不会出现这个问题。
  • 如果用的是自定义本地字体，确认public目录下的字体文件路径正确，且Vercel部署时已经把这些文件打包上传了——可以去Vercel控制台的部署文件列表里核实。

• 验证CSS层叠与优先级

  • 检查Shadcn UI组件的字体样式有没有被全局样式或自定义样式覆盖，本地开发时CSS加载顺序可能和生产环境不一样，导致显示差异。
  • 确保全局字体类（比如inter.className）已经正确应用到根元素（<html>或<body>），而且没有其他高优先级选择器（比如内联样式、!important）覆盖了字体属性。
  • 分别在本地和Vercel部署后的页面用浏览器开发者工具，对比元素的font-family计算值，看看是不是真的存在差异。

• 清除缓存并重新部署

  • Vercel可能缓存了旧的字体资源或构建产物，导致新配置没生效。去Vercel控制台的部署页面，选择「Redeploy」并勾选「Clear build cache」，强制重新构建部署。
  • 本地开发时也可以先执行npm run build && npm run start模拟生产环境，提前验证字体显示效果，避免本地和生产构建的差异。

• 检查字体格式兼容性

  • 确保提供的字体文件包含多种格式（比如.woff2、.woff），不同环境的浏览器对字体格式的支持可能有细微差别，Vercel生产环境可能因为CDN缓存或浏览器UA不同，加载的字体格式和本地不一样。
  • 用next/font加载本地字体时，要正确指定src路径和格式：

    import localFont from 'next/font/local';
    const myFont = localFont({
      src: [
        {
          path: './fonts/my-font-regular.woff2',
          weight: '400',
          style: 'normal',
        },
      ],
    });
    

• 验证Vercel构建环境的依赖与配置

  • 确认package.json里的依赖版本（尤其是next和@shadcn/ui）在本地和Vercel构建环境完全一致，避免因为依赖版本不同导致字体处理逻辑有差异。
  • 检查next.config.js里的配置，有没有影响资源加载的选项（比如assetPrefix），确保字体资源的加载路径在本地和生产环境是一致的。

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