Next.js - global 구글 폰트 적용하기(next/font)

 

넥스트를 사용하며 전역적으로 폰트스타일을 추가하려고 한다.

 

 

폰트를 사용하는 방법은 두가지 정도가 있다.

static한 내장 폰트를 사용하거나 웹 폰트를 사용하거나

 

내장 폰트는 다양한 브라우저 환경이나 운영체제에 따라 달라질 수 있다. (그래서 보통 웹 폰트를 많이 쓴다)

웹 폰트는 아무래도 외부 네트워크로 다운로드 해오다보니 다운로드할 동안 공백기(?)에 대한 이슈가 생긴다.

→ FOUT(기본 폰트가 나오고 로딩 후 웹 폰트로 대체) / FOIT(아무것도 안나오다 로딩후 웹 폰트로 대체)

 

지난번 리액트 사용하면서 폰트 프리로드하는 최적화를 진행해본적이 있다 그때는 급하게 찾아서 했었는데 이번 플젝을 진행하며 어떤 원리로 왜 이런 과정을 거치는 지의 인사이트가 한번 더 넓혀진 것 같다

웹 최적화 - 구글 폰트 속도 빠르게 만들기 (TEST)

 

BUT ...  ✋

Next.js 13 의 좋은 점으로 next/font 라는 폰트 시스템이 추가되었다! React에서의 개.고.생 들을 뒤로 한채 폰트최적화를 할 수 있게 된 것이다.

예전에는 구글 폰트 같은 웹 폰트를 외부 네트워크로 요청해 다운받는데 부하가 있었다면

지금에는 빌드시 함께 추가되어 셀프호스팅으로 로드된다는 것이다!

 

자 그렇다면 글로벌로 google font 를 적용시켜보자

 

 

---

Next.js - global 구글 폰트 적용하기(next/font)

 

1. 먼저  _app.js 라는 파일을 만들어 주자

이 친구는 서버 파일로 서버로 요청이 들어왔을 때 가장 먼저 실행된다.

디렉터리 위치확인!

 

2. 아래 내용 복붙 후, 원하는 구글 폰트로 변경해주면 된다

 

src/app/pages/_app.js

import { Inter } from "next/font/google"; // 원하는 폰트 가져와서 사용하기

const inter = Inter({ subsets: ["latin"] });

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

 

 

 

 

ref: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#apply-the-font-in-head