티스토리 뷰

카테고리 없음

Next Js tailwind 구글 폰트 사용하기

Korean Eagle 2024. 3. 26. 21:01
728x90

Tailwind에서 구글 폰트를 tailwind css으로 사용하면 편리하다.

 

이전 포스팅에서 Next Js에서 구글 폰트 사용하는 걸 올렸는데, 이해할 것도 없지만, 거기서 시작하면 이해하기 더 쉽다.

NextJs 구글 폰트 사용하기 (tistory.com)

 

1. fonts.js 파일에 import 할 폰트를 import 한다. 여기에 variable을 정의한다. 이 변수는 tailwind 설정에 사용한다.

// app/fonts.js

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

export const notosanskr = Noto_Sans_KR({
  subsets: ['latin'],
  variable: '--font-notosanskr'
})

 

2. RootLayout 파일에 자바 스크립트 문법으로 html 테그에 해당 폰트 변수를 지정한다. 

  2-1 하나 이상의 폰트를 연결하고 싶으면 ${} 문법으로 추가하면 된다.

import React from 'react'

import './globals.css'
import Navbar from "../components/Navbar"
import { notosanskr } from "./fonts"

function RootLayout({ children, }) {
  return (
    <html lang="en" className={`${notosanskr.variable}`}>
      <body>
        <header>
          <Navbar />
        </header>
        <main>
          {children}
        </main>
        <footer>
          Footer
        </footer>
      </body>
    </html>
  )
}

export default RootLayout

 

3. tailwind.config.js 에 연결한다. extends 안에 fontFamily 를 추가 한다. 여러 개 쓰고 싶으면 속성으로 더 추가하면 된다. 기본 폰트로 지정하고 싶으면 notosanskr 이름 대신 sans 같은 시스템 정의 객체 이름으로 변경하면 된다.

 

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        notosanskr: ["var(--font-notosanskr)", "sans-serif"]
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}

 

4. 지난 포스팅에서 자바 스크립트 문법으로 정의한 부분을 제거 하고 그냥 css를 지정하면 된다.

  4-1 css 이름은 변수 이름이다. 위에서는 font-notosanskr 이 되겠다.

  4-2  vscode를 쓰면 intellisense에도 등록되어 있는 것을 확인할 수 있다.

// component/heading.jsx

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

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

export default Heading
728x90
저작자표시
댓글