NextJs 폰트 적용하기(최적화 하기)

개요

NextJs에서는 2가지의 폰트적용 방법을 제공한다. 첫번째로는 Google Fonts의 방법이고, 두번째는 Local Fonts의 방법이다. 첫번째 방법인 Google Fonts는 NextJs에 내장되어 있어서 간단하게 Import 하여 사용 가능하고, Local Fonts의 방법은 사용하고자 하는 폰트의 woff 파일을 다운받아서 사용하는 방법이다. 공식문서를 참고하면 누구나 다 적용할 수 있지만, 공부도 하면서 차이점도 쓰면서,, 그러려고 한다,, 프로젝트를 진행하면서 두 방법 모두 사용 보았으며, 그것에 대한 기록을 적어두려고 한다. 나는 App Router 방식이 아닌 Pages Router 방식을 사용했다.

 

Google Fonts 적용하기

공식문서에서도 나와 있듯이 적용방법은 너무나도 간단하다. Google Fonts에서 제공하는 모든 폰트를 사용할 수 있고, 간단하게 사용하고자 하는 폰트를 Import 해서 사용하면 된다. 나는 가장 대중적인 Noto Sans를 사용했다. 

pages/_app.tsx

import type { AppProps } from "next/app";
import { Noto_Sans_KR } from "next/font/google";
import "@/styles/globals.css";

const notoSansKr = Noto_Sans_KR({ subsets: ["latin"] });

export default function App({ Component, pageProps }: AppProps) {
  return (
      <main className={notoSansKr.className}>
        <Component {...pageProps} />
      </main>
  );
}

 

 

Local Fonts 적용하기

1. 먼저 눈누폰트의 프리텐다드로 들어 간 후에 다운로페이지로 이동한다.

2. 이동 후에 페이지를 아래로 조금 내리면 글꼴 다운로드가 나온다. 다운로드 해주면 된다.

 

3. web/static/woff2 폴더의 모든 폰트를 사용하려고 하는 프로젝트에 @/fonts 폴더를 생성 후에 넣는다.

woff1과 woff2의 차이 
woff2는 woff의 개선된 버전이다. 동일하게 웹 폰트를 압축하고 최적화 하기 위한 웹 폰트 형식이지만, woff2는 Brotli 압축 알고리즘을 사용하여 폰트 데이터를 압축한다. 이를 통해서 기존 woff1 대비 약 30%에서 50% 정도 더 작은 파일 크기를 가질수 있다. 근데 개선된 버전이 나왔는데 왜 woff1은 사라지지 않고, 왜 사용할까? 이유는 바로 호환성 문제이다. woff2는 비교적 낮은 호환성을 가지고 있어 woff1을 폴백 폰트로 같이 사용한다.(woff2를 메인으로 사용하지만 호환되지않는 브라우저를 사용할 시 woff1 폰트를 사용한다.) 하지만 익스플로러가 사라지면서 호환되지 않는 브라우저는 없다.

 

4. _app.tsx에 폰트 적용하기

import localFont from "next/font/local";

const Pretendard = localFont({
  src: [
    {
      path: "../fonts/Pretendard-Black.woff2",
      weight: "900",
      style: "nomal",
    },
    {
      path: "../fonts/Pretendard-ExtraBold.woff2",
      weight: "800",
      style: "nomal",
    },
    //...fonts of different sizes
  ],
});

export default function App({ Component, pageProps }) {
  return (
    <main className={Pretendard.className}>
      <Component {...pageProps} />
    </main>
  );
}

 

Local Fonts를 사용하면 성능이 저하된다?

시간이 지나고 나서야 알게되었지만 NextJs 공식문서에서는 variable fonts(가변 폰트)를 사용하길 권장한다. 그러면 위의 방법처럼 각각 다른 폰트 파일을 받지 않고, 한개의 폰트 파일로 여러 두께의 폰트를 사용할 수 있다.

variable fonts(가변 폰트)란?
variable font(가변 폰트)는 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 스타일마다 별도의 다른 파일을 사용하는 기존 폰트 대신 다양한 유형의 폰트를 단일 파일에 통합할 수 있는 OpenType 폰트 사양을 발전시킨 것이며 가변 폰트(Variable fonts)를 오픈타입 가변 폰트(OpenType Variable Fonts) 라고 부르기도 한다.
가변 폰트는 width(너비), weight(두께), slant(기울기) 등 폰트 별로 다양한 축을 가지고 있으며 이 축을 수치로 조정하여 원하는 스타일을 지정하고 조합할 수 있다.

 

그렇다면 variable fonts를 사용하지 않았을 때의 성능은 어떨까? Lighthouse로 확인해 보면 performance는 54점이 나오고, 네트워크 페이로드가 커지지 않도록 관리하라고 한다. 함께 나오는 무수한 폰트 파일들,, 또한 Network를 살펴보면 모든 폰트파일을 읽어오면서 많은 시간이 걸린다. 이것을 한개의 가변폰트로 변경하면 렌더링 시간, performance 까지 좋아지지 않을까? 한번 바꿔보자.

 

LightHouse 점수

 

 

네트워크 페이로드가 커지지 않도록 관리하기(Total Blocking Time)

 

Network

 

variable fonts 적용하기

src/fonts 폴더에 전에 있던 모든 폰트파일과 variable fonts.woff2 파일을 교체해 주고, 코드 또한 변경해준다. 코드는 공식문서를 참고하면 좋다.

 

src/fonts

 

@/pages/_app.tsx

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

 

그렇다면 성능이 얼마나 좋아졌을까? performance 점수가 54점에서 72점으로 올랐고, 폰트 파일의 전송 크기가 커졌지만, 전보다는 확연히 줄어들었음을 확인할 수 있다.

 

LightHouse 점수

 

네트워크 페이로드가 커지지 않도록 관리하기(Total Blocking Time)

Network

 

또 그렇다면? Google Fonts 방식과 비교를 안해볼 수 없다. 

Google Fonts vs Local Fonts

Google Fonts 방식을 사용했을 때의 Lighthouse 점수는 아래와 같다. 가변 폰트를 사용했을 때 보다 10점 정도 더 상승했다. 그러면 내가 폰트파일을 무자비 하게 넣었을 때 보다 30점이나 더 올랐다는 것이다. 나는 생각보다 많이 무자비 했을지도 모른다. 

LightHouse 점수 

마무리

NextJs에서 폰트를 적요하는 방법과 최적화 하는 방법에 대하여 알아보았다. 공식문서에서 제공하는 방법만 잘 읽어본다면 프로젝트의 질이 많이 증가된다. 다시 한번 공식문서의 중요성을 깨닫게 되는 계기가 아닐까 한다. 부족한 performance 점수는 아마 이미지 때문인데, 사실 잘 모르겠다. webp, avif 파일 형식으로 변경하면 성능 향상에 도움이 된다고 하지만, 이미지가 작아서 그런지 크게 변화는 없었다. 아마 더 알아봐야 할 것 같다. 하지만 폰트 적용 방법을 통해 성능 향상을 해서 뿌듯하다.