[NextJS] font 가져오기 쉬운 버전!

쉬운걸 어렵게 하고 있었다..

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500&display=swap" rel="stylesheet');

body {
  background: #f2f2f2;
  color: #333;
  font-family: "Noto Sans";
}

▶ 첫 문장에 보면 @import url("주소")로 표현된 부분이있다.

▶ 구글 폰트의 URL에서 가져온 값을 저기다가 입력한다.

▶ 그리고 바로 font-family를 해당 폰트 이름으로 입력해주면 된다!

1. 또 다른 방법

폰트를 넣고

2. tailwind.config.js 파일을 수정

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        SongMyung: ["Song Myung"],
      },
    },
  },
  plugins: [
  ],
}

3. global.css파일을 수정

@font-face {
  font-family: "Song Myung";
  font-weight: 200;
  src: url("/fonts/SongMyung-Regular.ttf") format("truetype");
};

4. 적용하기

<h1 className="font-SongMyung text-8xl my-2 lg:my-5 font-bold tracking-tight text-gray-900 lg:text-6xl ">
  미 래 민 중
</h1>

1. 또 다른 버전. nextjs에서 폰트 불러오기

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

2. 변수지정

const SongMyung=Song_Myung({subsets:['latin'],weight:['400']})

3. 스타일 지정

<p style={SongMyung.style} className="">미 래 민 중</p>