Next.js에서 font 적용 방법

Next.js에서는 font를 적용하는 방법이 두 가지가 있음

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

• 이 경우 NEXTjs 공식문서를 보고 따라하면 됨

  (관련 공식문서 링크 : https://nextjs.org/docs/basic-features/font-optimization)

• cdn을 제공하지 않으면 아래와 같은 방식으로 설치해야 함

  (관련 공식문서 링크 : https://nextjs.org/docs/migrating/from-create-react-app#static-assets-and-compiled-output)

2. 폰트 파일을 직접 다운 받고, public/fonts 파일 아래에 폰트를 넣어서 사용하는 방법

• 결론부터 말하자면 이 방식을 사용했음!!

양식 (위치: global.css)

@font-face {
  font-family: "<정할 폰트 이름>";
  font-weight: <폰트 굵기> (ex 400);
  font-style: normal;
  src: url("/fonts/<폰트파일이름>.ttf") format("truetype");
}

• format("truetype") 대신 format(”ttf”) 쓰면 왜 그러는지 모르겠지만… 이상하게 적용이 안 되는 폰트가 있음

  ⇒ format(”truetype”)이 더 올바른 표기법이라 그렇다고 함

body에 적용하기

body {
  font-family: "<정한 폰트 이름>", <만약 폰트 불러오기 실패시 불러올 대체 폰트>;
}