Nextjs Tailwind CSS에 사용자 지정 글꼴 적용하기 23년 최신 방법

---

 

 

이번 글을 통해 배워갈 내용

1. Nextjs Tailwind CSS에 사용자 지정 글꼴 적용하기 23년 최신 방법 

---

초간단 구글 Noto Sans Korean 폰트 적용해 보기

 

CDN으로 설정하면 브라우저에서 구글로 요청이 갑니다.

다운로드하여서 설정하려고 하니 귀찮습니다.

이제 Nextjs 13 버전부터는 그런 설정 걱정이 없습니다.

 

일단 프로젝트가 없으시면 Nextjs를 설치합니다

npx create-next-app@latest my-sample --typescript --eslint

 

_app.tsx를 아래와 같이 설정합니다.

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { Noto_Sans_KR, Bai_Jamjuree, Alata } from 'next/font/google';

const noto_kor = Noto_Sans_KR({
  weight: ['100', '300', '400', '500', '700', '900'],
  subsets: ['latin'],
  variable: '--font-notosans',
});

const alata = Alata({
  weight: ['400'],
  subsets: ['latin'],
  variable: '--font-alata',
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <main className={`${alata.variable} ${noto_kor.variable}`}>
      <Component {...pageProps} />
    </main>
  );
}

tailwind.config.js 에 

font를 추가해 줍니다.

const { fontFamily } = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}',
    './src/app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: 'var(--font-alata)',
        primary: 'var(--font-notosans)',
        serif: 'var(--font-notosans)',
      },
  },
  plugins: [],
}

끝입니다.

 

이제 사용해 주면 됩니다.

<div className="div font-primary text-6xl ">인생은 즐거워</div>

 

도움이 되었다면 하트 혹은 댓글을 남겨주세요~ ㅎㅎ

즐코하시기 바랍니다~

---

참조 및 인용

https://nextjs.org/docs/basic-features/font-optimization

Basic Features: Font Optimization | Next.js

https://fonts.google.com/noto/specimen/Noto+Sans+KR 

Noto Sans Korean - Google Fonts

 

 

---

블로그 추천 포스트

https://codemasterkimc.tistory.com/50

300년차 개발자의 좋은 코드 5계명 (Clean Code)

 

---