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

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1743829414a4514228.html

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

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

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

1 Answer 1

相关推荐