Eun_Frontend
  • [ Frontend/Next.js ]
    [Next.js] next/font 적용방법 [9/7 study]
    2024년 09월 07일 15시 49분 11초에 업로드 된 글입니다.
    작성자: 동혁이

    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>
  );
}

     

    더 쉽게 적용 가능함

      댓글

    티스토리툴바