[ Next.js ] Next13에서 커스텀 Font 세팅하기. (App Router 기준)

회사에서 새로운 프로젝트를 Next13을 도입하여 만들기로 결정하여 개발 진행중에, 우리는 Google Font가 아닌 Local Font를 사용하게 되어, 삽질을 조금 하다가... 세팅한 내용을 정리하려 한다.

우선, Next 공식 홈페이지에서 App Router 사용 방식으로 Font를 설정하는 부분을 보면

1. Google Font를 사용하거나, 2. Local Font를 사용하는 방법으로 크게 나뉜다.

우리가 사용하려는 Font는 Pretendard 였는데, Google Font에 없는 폰트여서 Local Font를 적용해야 했다...^_ㅠ

만약 Google Font에서 지원하는 폰트일 수 있으니 해당 사이트에서 서치해본 후 없다면 Local Font를 사용하는 걸로.... (Google Font 사이트 바로가기)

Google Font나 Local Font나 Next에서는 모두 Variable Font(가변폰트)를 사용하는것을 권장한다.

Flexible하게 사용하고 싶다면 Variable Font를 사용하도록 하자...!

(Variable Font는 폰트 파일안에 여러 가지 font-weigh, 스타일, 너비 등 다양한 변형을 포함할 수 있는 폰트 형식이다. - chatGPT)

Local Font Setting

Local Font 세팅하는 부분 참고 문서

-> Local Fonts - nextjs.org

1. app/layout.tsx에서 next/font/local 경로에 있는 localFont를 import 하고, localFont의 src속성에 내 local 폰트 경로를 적어준다. 이때 적용할 폰트 파일은 app/ 디렉토리 안에서 넣어주는걸 추천한다. (예시: app/fonts/my-font-file.woff)

// app/layout.tsx

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `app`
const myFont = localFont({
  src: './Myfont.woff2',
  display: 'swap',
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

2. 다양한 폰트 패밀리를 사용하고 싶다면 src를 array 형태로 선언하여 사용하면 된다.

// app/layout.tsx

const roboto = localFont({
  src: [
    {
      path: './Myfont-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Myfont-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Myfont-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Myfont-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

Web Font Setting - Pretendard

나는 Next에서 추천하는 방식대로 Variable Font를 적용하고 싶어서 Pretendard 폰트의 Variable Font를 검색해보았다.

Pretendard 홈페이지

운이 좋게도 내가 적용하려는 폰트는 GitHub에 웹폰트 사용 Docs가 있었다..!!

Pretendard 다이나믹 서브셋

나는 CDN을 이용하여 globals.css 에 import 후, 전체 스타일에 적용시켜주었다.

/* globals.css */

@import url("https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.7/static/pretendard-dynamic-subset.css");


* {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

왼쪽의 Pretendard Variable Font 적용 모습, 오른쪽의 font-family 속성을 보니 잘 적용된 것을 확인할 수 있었다 -!

🌸 출처 🌸

Local Fonts - Nextjs.org

저작자표시 비영리 동일조건

'React' 카테고리의 다른 글

[ Sentry ] F.E에서 Sentry를 활용하여 디버깅 하기. (0)	2024.05.19
[ React ] Suspense란 무엇일까? (0)	2023.07.16
[ Next.js ] Next13의 주요 기능에 대해 알아보자. (0)	2023.06.05
[ React ] 상태 관리 툴 비교 분석 Recoil vs Zustand (0)	2023.05.21
[ React ] React Props 알아보기. (0)	2023.03.20

🧚🏻 D_Dual Dev Blog🧚🏻

[ Next.js ] Next13에서 커스텀 Font 세팅하기. (App Router 기준)

Local Font Setting

Web Font Setting - Pretendard

'React' 카테고리의 다른 글

티스토리툴바

[ Next.js ] Next13에서 커스텀 Font 세팅하기. (App Router 기준)

Local Font Setting

Web Font Setting - Pretendard

'React' 카테고리의 다른 글

'React' Related Articles

티스토리툴바