📚 이론정리/React & Next.js

모노레포 Next15v Pretendard(프리텐다드) 폰트 적용하기

서카츄 2025. 6. 17. 22:45

Pretenard를 쓰는 이유

  • 디자이너분들이 많이 쓰는 한글 폰트
  • 폰트 굵기가 다양하여 섬세한 폰트 스타일링 가능
  • 무료 상업용 폰트

 

다운로드

 

Release v1.3.9 · orioncactus/pretendard

Pretendard GOV에서 심벌 문자를 개편하며, 패밀리에서 일부 문자 및 기능 사용성을 개선합니다. 자세한 업데이트 개요는 이곳에서 확인하실 수 있습니다. Pretendard GOV에서 심벌 문자 개편 특정 텍스

github.com

 

 

 

파일을 다운로드하고 

`pretendard-1.3.9/web/variable/woff2/PretendardVariable.woff2` 경로에 있는 파일을 프로젝트 디렉토리에 넣는다.

 

 

font폴더안에

fonts, src를 만들고 fonts폴더 안에는 다운받은 pretendard폰트를 넣어주었다.

📂 packages
└── 📂 font
    ├── 📂 fonts
    │   └── 📄 Pretendard-Variable.woff2  <- 경로
    └── 📂 src

 

 

Next.js 15에는 `next/font/local`이라는 아주 편리한 기능이 있다.

→ packages/font/src 폴더 안에 index.ts 라는 파일을 만든다.

 

 

 

packages/font/src/index.ts

import localFont from 'next/font/local';

export const pretendard = localFont({
  src: '../fonts/Pretendard-Variable.woff2', // 👈 우리 폰트 파일 위치
  display: 'swap',
  weight: '45 920', // Pretendard Variable 폰트가 지원하는 굵기 범위
  variable: '--font-pretendard', // 👈 이 폰트에 별명을 지어주는 것
});

 

 

  • `src`: '../fonts/...': index.ts 파일 입장에서 폰트 파일이 어디 있는지 알려주는 것
  • `variable`: '--font-pretendard': 나중에 CSS에서 "프리텐다드 폰트 줘!" 대신 var(--font-pretendard) 라는 암호(별명)로 쉽게 부를 수 있다. 

 

 

 

이제 우리가 만든 font 패키지를 다른 곳에서 사용하려면 이름표(package.json)가 필요!

  1. packages/font 폴더 안에 package.json 파일을 만든다
  2. 아래 내용을 복사해서 붙여넣는다.
{
  "name": "@repo/font",
  "version": "0.0.0",
  "private": true,
  "exports": {
    "./pretendard": "./src/index.ts"
  }
}

 

복사한 뒤 package.json 목록에 여기에 Next가 없으니 에러를 낼 수 있다.

즉,Next 회사 도구를 써도 좋다고 허락을 안해준 것

 

 

Next 설치하기

`packages/font` 폴더로 이동 후 next 도구 설치

pnpm add -D next //pnpm
yarn add next -D //yarn
npm install next --save-dev //npm

 

 

 

 

설치하면 package.json폴더에 다시 보면 `devDepedncies` 안에 next가 생기는 것을 알 수 있다.

{
  "name": "@repo/font",
  "version": "0.0.0",
  "private": true,
  "exports": {
    "./pretendard": "./src/index.ts"
  },
  "devDependencies": {
    "next": "^15.3.3"
  }
}

 

 

 

`@repo/font` 와 Next.js 에서 사용할 수 있도록 연결작업

  1. apps/web/package.json 파일을 열어준다.
  2. dependencies 부분에 아래 한 줄을 추가
  "dependencies": {
    "@repo/font": "*",
  },

 

 

 

 

 

명령어로 다시 업데이트

터미널을 열고 프로젝트의 가장 최상위 폴더(루트)에서 `pnpm install` 명령어를 실행한다.

이제 새 폰트를 쓸 수 있다고 알려주는 과정이다.

 

 

 

 

Next.js Pretendard 폰트를 사용할 수 있도록 설정

  1. `apps/web/app/layout.tsx` 파일로 들어간다.
  2. 아래와 같이 코드를 수정해준다.
import type { Metadata } from "next";
// pretendard 폰트를 가져와요!
import { pretendard } from "@repo/font/pretendard";
import "./globals.css";

export const metadata: Metadata = {
  title: "Create Turborepo",
  description: "Generated by create-turbo",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}): JSX.Element {
  return (
    <html lang="ko" className={pretendard.variable}> {/* ✨ 바로 여기! */}
      <body>{children}</body>
    </html>
  );
}

 

 

 

 

 

번외) 테일윈드 (Tailwind CSS)를 쓴다면?

테일윈드에게도 우리 폰트가 프리텐다드를 쓸거야! 라고 알려주어야 한다.

모노레포를 사용하고 있기 때문에

`packages/tailwind-config/tailwind.config.ts` 경로로 이동한다.

없으면 새로 tailwind.config.ts를 생성해준다.

 

이거 때문에 뒤적이다가 리드미 우연히 보고 클릭해서 알게 됨 ㄷㄷ

리드미에 있는 링크를 클릭하면 자동으로 새로 파일을 생성해준다.

 

 

 

 

코드 추가

import type { Config } from "tailwindcss";

const config: Config = {
  // content는 Tailwind가 어떤 파일들을 보고 CSS를 만들지 결정하는 부분
  // "우리 앱 폴더와 공용 UI 폴더에 있는 파일들을 다 살펴봐줘!" 라는 뜻
  content: [
    "../../apps/**/*.{js,ts,jsx,tsx}",
    "../../packages/ui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // Pretendard 폰트 규칙 추가
      fontFamily: {
        sans: ["var(--font-pretendard)", "sans-serif"],
      },
    },
  },
  plugins: [],
};

export default config;

 

 

 

 

파일을 저장하고, 터미널에서 개발 서버를 완전히 껐다가 다시 켜서(pnpm dev) 최종 확인

 

 

 

 

 

저작자표시 비영리 변경금지 (새창열림)