tailwind css - Custom local font works locally in Next.js but not on Vercel deployment

I’m using a custom local font (PretendardVariable.woff2) in my Next.js 13 app (App Router). It works perfectly when I run the app locally, but after deploying to Vercel, the font doesn’t apply on the live site.

Here’s what I’ve tried:

global.css

@font-face {
  font-family: "Pretendard";
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Pretendard";
}

src/app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import localFont from "next/font/local";

const pretendard = localFont({
  src: "../../public/fonts/PretendardVariable.woff2",
  display: "swap",
  weight: "45 920",
  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={`${pretendard.variable} antialiased`}>
        {children}
      </body>
    </html>
  );
}

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)"],
      },

Here’s what I’ve tried:

global.css

@font-face {
  font-family: "Pretendard";
  src: url("/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Pretendard";
}

src/app/layout.tsx

import type { Metadata } from "next";
import "./globals.css";
import localFont from "next/font/local";

const pretendard = localFont({
  src: "../../public/fonts/PretendardVariable.woff2",
  display: "swap",
  weight: "45 920",
  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={`${pretendard.variable} antialiased`}>
        {children}
      </body>
    </html>
  );
}

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)"],
      },

Share Improve this question asked 2 days ago John Han 11 silver badge New contributor John Han is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

In the case of relative paths, the developer and production paths are usually different. You have the option (process.env.NODE_ENV) to set the path based on the Node.js runtime type, so when you build a product in production mode, a different path will be applied than during development.

Node.js, the difference between development and production - Node.js Learn
Environment variables: Good to know - Next.js Docs

const pretendard = localFont({
  src: process.env.NODE_ENV === "production" 
    ? "/fonts/PretendardVariable.woff2" 
    : "../../public/fonts/PretendardVariable.woff2",
  display: "swap",
  weight: "45 920",
  variable: "--font-pretendard",
});

Note: Since I am not familiar with your project, I do not know the full path, but of course, make sure to check the correct relative path in production. I assume that in production, the default starting point should be the public folder, and there is no need to navigate into it.

I'm not an experienced Next.js user, but you should still be able to access your public folder in development mode if you start the URL with / instead of ./. This way, it would work in both production and development environments.

Optimizing: Static Assets - Next.js Docs
How to use self-hosted fonts face using Next.js? - StackOverflow

const pretendard = localFont({
  src: "/fonts/PretendardVariable.woff2",
  display: "swap",
  weight: "45 920",
  variable: "--font-pretendard",
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

tailwind css - Custom local font works locally in Next.js but not on Vercel deployment - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)