React

react/nextJs font 적용하기

떼굴펜 2024. 8. 31. 23:07

1. https://cactus.tistory.com/306 에서 폰트 다운로드

2. 가변 프리텐다드 woff2 를 소스코드 root 폴더 안에 위치

3. root layout 의 폰트 변경

이상하게 매번 localFont를 못 찾아서 복붙해서 넣어준다. 

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

const pretendard = localFont({
  src: "./fonts/PretendardVariable.woff2",
});

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="kr">
      <body className={pretendard.className}>{children}</body>
    </html>
  );
}

 

4. local 띄워서 확인!