Written by Parkdev
on February 14, 2024

[Next.js] 폰트 설정 방법 정리

Local Font 설정방법

localfont설정 및 tailwind css와 결합 하는 방법

import localFont from "next/font/local"

import { cn } from "@/lib/utils" // shadcn 설치시 사용가능 shadcn설치를 하지않았으면 twMerge를 쓰거나 링크 참조 
//https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

//localFont함수는 폰트 파일을 로드하는 함수
const headingFont = localFont({
    src: "../../public/fonts/font.woff2",
});

// 본문
return (
	//...
	<div className={cn(
    "flex items-center justify-center flex-col",
    headingFont.className
    )}>
    //...
    </div>    
)

GoogleFont 설정 방법

//Poppins 폰트를 불러온다고 가정하면
//shadcn을 사용했을때 방법이며 이외에는 공식 문서 참조
//https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

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

const textFont = Poppins({
  subsets: ["latin"],
  weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

// 본문
return (
	//...
	<div className={cn(
    "flex items-center justify-center flex-col",
    textFont.className
    )}>
    //...
    </div>    
)

← → Top