[Next.js] next/font 적용방법 [9/7 study]

[Next.js] next/font 적용방법 [9/7 study]Frontend/Next.js2024. 9. 7. 15:49@동혁이

Table of Contents

next/font 적용방법

1. @next/font

Next.js 에서는 @next/font란 라이브러리를 설치하여 구글 폰트를 자유롭게 사용할 수 있습니다

npm i @next/font
yarn add @next/font

import { Jua } from "@next/font/google";


const jua = Jua({ subsets: ["latin"], weight: ["400"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body className={jua.className}>
        {children}
      </body>
    </html>
  );
}

라이브러리에서 google font에 등록된 폰트를 가져와서 보여주는것이 가능함

2. next/font

@next/font 라이브러리를 Next.js 14에서는 필요가 없습니다. 라이브러리가 없어진 건 아니고 기본 패키지로 들어와서 굳이 설치가 필요없습니다!

import { Jua } from "next/font/google";
// @를 떼서 적용!

const jua = Jua({ subsets: ["latin"], weight: ["400"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body className={jua.className}>
        {children}
      </body>
    </html>
  );
}

더 쉽게 적용 가능함

@동혁이 :: Eun_Frontend

프론트엔드 공부일지 입니다.

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

티스토리툴바