✏️ Next.js 14v google font 적용하기

서카츄 2024. 8. 21. 01:24

next.js 에서 프로젝트를 진행할때 13버전 이상부터는

`next/font`라는 자체 호스팅이 내장되어 있어 구글 폰트를 사용할 수 있다.

이미 next.js를 사용해보면 기본 보일러플레이트에서 내장되어 있는 모습을 알 수 있는데

이것을 활용하여 구글 폰트를 적용해 보기로 했다.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

최상위 레이아웃에 이미

import { Inter } from "next/font/google";

을 불러오는 것을 알 수 있는데 여기서 수정만 해주면 된다.

import { Noto_Sans_KR } from "next/font/google";

//적용할 font
const notoSansKr = Noto_Sans_KR({
  weight: ["500"],
  subsets: ["latin"],
});

  //body에 스타일 넣기
  <html lang="ko">
      <body className={notoSansKr.className}>{children}</body>
  </html>

이렇게 적용해주면 전체 페이지에 NotoSans폰트가 적용된 것을 확인해 볼 수 있다!

Docs

Optimizing: Fonts | Next.js

Optimize your application's web fonts with the built-in `next/font` loaders.

nextjs.org

저작자표시 비영리 변경금지 (새창열림)