admin管理员组

文章数量:1346310

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

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)"],
      },
  • next.js
  • tailwind-css
  • vercel
Share Improve this question asked 2 days ago John HanJohn 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

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 cssCustom local font works locally in Nextjs but not on Vercel deploymentStack Overflow

版权声明：本文标题：tailwind css - Custom local font works locally in Next.js but not on Vercel deployment - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743829414a2546249.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。