Nextjs에 폰트 적용하려면!

Minju Kim·2022년 8월 29일

프로젝트 진행 중 nextjs에 네이버 폰트를 적용하고 싶었다. 그런데, ttf파일을 다운받고 @font-face를 적용해주어도 화면에 반영이 안되는 것이었다....두둥!
이것저것 방법을 찾아본 결과, 적용을 할 수 이었고, 까먹지 않기 위해 적어둔다!

웹상에 돌아다니는 패키지 중에 next-fonts라는 패키지가 있는데, 2019년에 만들어진 것으로 그 당시에는 Nextjs가 font import를 공식적으로 지원하지 않아 사용되던 플러그인이다. 그러나 이제는 Nextjs에서 지원해주기 때문에 이 플러그인은 사용하지 않는게 좋겠다!

🫶🏻 결론적으로는 두 가지 방법이 있다!

(google font)를 사용할 경우, _documents.tsx에 cdn 삽입

font파일을 public 폴더에 저장하여 사용

1번의 경우 NEXTjs 공식문서를 보고 따라하면 된다!
(관련 공식문서 링크 : https://nextjs.org/docs/basic-features/font-optimization)

그러나 네이버의 경우 cdn을 제공하지 않기 때문에 아래의 방식으로 설치해야 한다.
(관련 공식문서 링크 : https://nextjs.org/docs/migrating/from-create-react-app#static-assets-and-compiled-output)

1. 폰트 파일 다운

네이버 글꼴 모음 사이트에서 적용하기 원하는 파일을 다운받아 준다.

2. 중요! 프로젝트 최상단에 public/fonts 폴더를 만들어준다.

공식문서에 따르면, 정적이미지와 폰트 등은 이 경로에 추가하라고 설명해주고 있다.

3. font-face를 이용하여 사용하기 원하는 폰트를 createGlobalStyle에 작성해준다.

나는 나눔스퀘어 Bold와 Regular을 사용하고 싶었기에, 아래 두 가지 글꼴을 font-face를 이용하여 createGlobalStyle에 넣어주었다.
font-family는 하나로 일치시켜주고, 파일에 맞게 불러와주면 된다.

    @font-face {
        font-family: 'NanumSquare';
        font-weight: 400;
        font-style: normal;
        src: url('/fonts/NanumSquare-Medium.ttf') format('ttf');
    }

    @font-face {
        font-family: 'NanumSquare';
        font-weight: 700;
        font-style: normal;
        src: url('/fonts/NanumSquare-Bold.ttf') format('ttf');
    }

그리고 해당 font-family를 body에 작성해 주어 전체적으로 해당 폰트를 문서 어디에서든지 사용가능하도록 했다.