Font 적용

✒️ 2025-05-28 11:08 내용 수정

Font 적용

next/font는 자동으로 커스텀 font를 포함한 font들을 최적화하고, 외부 네트워크 요청을 제거한다.
- 참고 자료 : Next How to use fonts
- Google Fonts에 있는 font들을 Google에 요청을 보내지 않고 사용할 수 있다.

모든 페이지에 공통으로 적용할 font는 /pages/_app.js 파일에 font를 설정해 적용한다.

import '@/styles/global.css';
import {Noto_Sans_KR} from 'next/font/google';

// 띄어쓰기가 있는 경우엔 "_"를 사용한다
const notoSansKR = Noto_Sans_KR({
  weight: ['400', '700'],
  subsets : [] // 언어 설정. 빈 배열은 모든 언어
})

export default function App({ Component, pageProps }) {

  return (
    <>
	  <main className={notoSansKR.className}>
	    <Component {...pageProps} />
      </main>
    </>
  )
}

<style> 태그에 적용할 font를 css 형식으로 작성해서 <head>에 주입할 수 있다.
- <style> 태그 내에서 백틱을 사용해야 ${googleFont.style.fontFamily}를 출력할 수 있음에 유의해야 한다.

import '@/styles/global.css';
import {Noto_Sans_KR, Dongle} from 'next/font/google';

const notoSansKR = Noto_Sans_KR({
  weight: ['400', '700'],
  subsets : []
})

const dongle = Dongle({
  weight: ['400'],
  subsets : []
})

export default function App({ Component, pageProps }) {

  return (
    <>
        <style>
          {
            `
              html{ font-family: ${dongle.style.fontFamily};}
              h1{ font-family: ${notoSansKR.style.fontFamily}; }
            `
          }
        </style>
      <Component {...pageProps} />
    </>
  )
}

개별 페이지에 적용하는 방법도 /pages/_app.js에서 적용한 것과 비슷하게 className에 적용하여 사용할 수 있다.

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

const notoSansKR = Noto_Sans_KR({
  weight: ['400', '700'],
  subsets : []
})

export default function Test() {
	return(
		<div className={notoSansKR.className}>
			<p>Font Test</p>
		</div>
	)
}