NextJs 구글 폰트 사용하기

NextJs는 pre rendering 할 때 사용하는 폰트를 다운로드해서 static 페이지를 만든다.

서버에서 패키징 시에만 폰트 사이트에 접속해서 가져온다.

 

1. fonts.js 파일을 만들어 폰트를 import 한다. 보통 app 폴더 아래 만든다.

// app/fonts.js

import { Noto_Sans_KR } from 'next/font/google'

export const notosanskr = Noto_Sans_KR({
  subsets: ['latin']
})

 

2. 사용한다. 

// component/heading.jsx

import { notosanskr } from "../app/fonts"
import React from 'react'

function Heading({ children }) {
  return (
    <h1 className={`py-3 ${notosanskr.className}`}>
      {children}
    </h1>
  )
}

export default Heading