NextJS Tailwindcss 구조에 Google Font 설정

프로젝트를 만들다보면 다양한 폰트가 필요한 경우가 있습니다.

저는 주로 Google Fonts 를 사용하는데요, 무료이기도 하고 제공하는 폰트가 워낙 많아 아주 유용하게 사용되곤 합니다.

이 폰트를 NextJS, Tailwindcss, Typescript 개발환경에 설정하는 방법에 대해서 정리해봅니다.

tailwind.config.js

tailwindcss에서 사용

module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        press: ['"Press Start 2P"', "cursive"],
      },
    },
  },
  plugins: [],
};

_document.tsx

nextjs 에서는 _document.tsx 라는 파일에 기본적으로 HTML에 대한 설정이 가능합니다.\
여기서 내부에 태그를 이용해서 구글 폰트 경로를 추가하여줍니다.

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);

    return initialProps;
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

폰트 사용 방법

이제 내부에서 해당 폰트를 사용하시면 됩니다.
방법은 tailwindcss.config.js 에서 입력하였던 fontFamily 부분에서 key 값에 해당하는 부분을 이용합니다.
예시로 press: ['"Press Start 2P"', "cursive"], 이런식으로 입력을 했다면, class에 font-press 를 추가해주시면 해당 부분 폰트에 적용이 가능하게 됩니다.

<div className="font-press">
Content
</div>