티스토리 뷰

Next.js

Next.js 폰트 적용하기

윤미주 2024. 8. 26. 12:20

☁️환경☁️

  • Next.js(app router)
  • tailwind css

 

현재 진행하고 있는 프로젝트에서 

 

- 한글은 Pretendard

- 영문, 숫자는 Roboto font 

 

두가지 폰트를 사용한다. 굵기와 사이즈도 다양하게 사용된다. 

이때 어떻게 최적화된 폰트를 사용할 수 있는지 정리해보려고 한다. 

무엇이 정답인지 확신할 수 없기 때문에 최대한 공식문서에 맞게 진행해보자.. 

 

Pretendard 다운받기

1. 아래 링크로 들어가 글꼴 다운받기 클릭 

https://cactus.tistory.com/306

 

Pretendard

Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는

cactus.tistory.com

 

2. 사용해야하는 파일 찾기

Next.js 공식문서에

` 최상의 성능과 유연성을 위해 가변 글꼴을 사용하는것이 좋습니다 ` 라고 작성되어 있다.

 

때문에 나는 가변글꼴을 사용할 수 있는 파일을 선택했다. 

zip파일 압축 해제 후 아래경로로 따라가 ` PretendardVariable.woff2  `를 찾으면 된다.

 

web / variable / woff2 / PretendardVariable.woff2 

web
용도: 웹에서 사용하기 위해 최적화된 파일
권장사용: 웹 환경에서는 주로 .woff2 파일을 사용하면 최신 브라우저에서 효율적으로 압축되고 빠르게 로드됨

public
용도: 웹 뿐만 아니라 다양한 호나경에서 사용될 수 있는 폰트 파일 (오프라인 인쇄, 데스트톱 환경에서 주로 사용)
권장 사용: 데스크톱이나 애플리케이션, 인쇄용으로 사용 웹에서는 사용하지 않는것이 좋다.  

 

 

프로젝트에 폰트 설정하기

1. 프로젝트 폴더에 저장하기

공식문서에서 ` localFont `를 가져올 때 경로를 보면 `next/font/local` 로 되어있다. 

 

` src / fonts / PretendardVariable.woff2  ` 경로에 저장해 주면 import 되는 것을 알 수 있다. 

 

2. layout.ts에 코드 작성하기

import localFont from "next/font/local";

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

`src`

PretendardVariable.woff2 가 존재하는 파일의 경로

` variable `

css 변수로 정의하기 

` display `

웹 폰트가 로드되기 전 까지 시스템 폰트로 먼저 표시 

 

그리고 return문 안에서 아래와같이 작성해주면 기본 폰트는 전부 pretendard로 적용될 것이다.

  return (
    <html lang="ko" className={`${pretendard.variable}`}>
      <body className="font-pretendard">
        <QueryProvider>{children}</QueryProvider>
      </body>
    </html>

 

3. tailwind.config.ts에 fontfamily 추가하기

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        pretendard: ["var(--font-pretendard)", "sans-serif"],
        roboto: ["var(--font-roboto)", "sans-serif"],
      },
	},
  },
  plugins: [],
};
export default config;

 

GoolgFont 사용하기

공식문서에서 쉽게 설명해주기 때문에 따라하면 된다.

 

나의 경우 roboto는 숫자와 영문이 들어가는 경우에만 적용되기 때문에 

import { Roboto } from "next/font/google";

const roboto = Roboto({
  subsets: ["latin"],
  weight: ["700"],
  display: "swap",
  variable: "--font-roboto",
});

  return (
    <html lang="ko" className={`${pretendard.variable} ${roboto.variable}`}>
      <body className="font-pretendard">
        <QueryProvider>{children}</QueryProvider>
      </body>
    </html>
  );
}

 

variable 옵션을 주고 

roboto font 적용이 필요한 곳 에만 불러서 사용하고 있다.

          <p className="font-roboto">
            {subTitle}
          </p>

 

참고로 폰트는 필요한 곳 에서만 불러서 사용하는 것이 성능에 더 좋다!!!


참고 문서

1. https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts

 

Optimizing: Fonts | Next.js

Optimize your application's web fonts with the built-in `next/font` loaders.

nextjs.org

 

2. https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts

 

Optimizing: Fonts | Next.js

Optimize your application's web fonts with the built-in `next/font` loaders.

nextjs.org