Next.js 13自定义本地字体本地正常，部署到Vercel后失效

你遇到的核心问题是同时混用了原生@font-face和Next.js官方推荐的next/font/local方案，加上路径、权重范围配置不匹配，导致部署到Vercel后字体资源加载异常。以下是针对性的修复步骤：

1. 移除冲突的字体配置 #

首先删除global.css中的手动@font-face规则，因为next/font/local会自动生成优化后的字体样式（包含预加载、缓存策略、部署路径适配），手动配置会导致样式优先级冲突或资源加载路径错误：

// global.css 修正后
body {
  font-family: var(--font-pretendard), sans-serif;
}

2. 修正layout.tsx中的next/font/local配置 #

调整字体路径、权重范围（匹配Pretendard Variable实际支持的100-900），并简化变量应用：

// src/app/layout.tsx 修正后
import type { Metadata } from "next";
import "./globals.css";
import localFont from "next/font/local";

// 路径直接使用public目录下的相对路径，Next.js会自动处理部署后的资源路径
const pretendard = localFont({
  src: "./fonts/PretendardVariable.woff2",
  display: "swap",
  weight: "100 900", // 匹配Pretendard Variable的实际权重范围
  variable: "--font-pretendard",
});

export const metadata: Metadata = {
  title: "John Han's Blog",
  description: "Welcome to John Han's Blog",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${pretendard.variable}`}>
      <body className="antialiased">
        {children}
      </body>
    </html>
  );
}

3. 优化Tailwind配置（可选） #

如果希望全局默认使用Pretendard字体，可在tailwind.config.ts中设置默认字体族：

// tailwind.config.ts 修正后
import type { Config } from "tailwindcss";

const config: Config = {
  darkMode: "class",
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/container/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        pretendard: ["var(--font-pretendard)", "sans-serif"],
      },
    },
    // 设置全局默认字体
    fontFamily: {
      sans: ["var(--font-pretendard)", "sans-serif"],
      serif: ["var(--font-pretendard)", "serif"],
    },
  },
};

export default config;

4. 关键注意事项 #

• 文件名大小写：Vercel服务器区分文件名大小写，确保public/fonts/PretendardVariable.woff2的文件名与代码中完全一致（本地Windows系统不区分，容易忽略）。
• 避免重复配置：不要同时使用@font-face和next/font/local，前者无法适配Next.js的部署资源路径规则。
• 权重范围匹配：必须设置为字体文件实际支持的范围（Pretendard Variable为100-900），范围不匹配会导致字体无法正常渲染。

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