[Next.js] next/font/google로 폰트 적용하기

Next.js + Styled-Components로 프로젝트를 진행하던 중에 google font를 적용하고 싶어 찾아봤더니 13버전에서부터는 자체 호스팅을 해주기 때문에 별도의 설치없이 next/font/google 함수로 사용하려는 글꼴을 가져와서 사용하면 된다고 한다.

---

1. 사용할 폰트 import

// styles/fonts.js
import { Montserrat, Noto_Sans_KR } from "next/font/google";

export const montserrat = Montserrat({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-montserrat",
  weight: ["400", "500", "800", "900"],
});

export const notoSansKr = Noto_Sans_KR({
  preload: false,
  display: "swap",
  variable: "--font-noto-sans-kr",
  weight: ["100", "400", "500", "700", "900"],
  fallback: ["Noto Sans KR", "Helvetica", "sans-serif"],
});

2. 폰트를 사용할 컴포넌트에 적용

className을 전달해서 사용하는 방식으로 적용했다.

import { montserrat, notoSansKr } from "../styles/fonts";

return (
	<Style.Wrapper className={notoSansKr.className}>
      ...
      <h3 className={`en_title ${montserrat.className}`}>title</h3>
  	</Style.Wrapper>
)

---

참고
Next.js google font
블로그