next.js 14버전에서 font-family 적용하는 방법 정리
app/layout.tsx
import type { Metadata } from 'next'; import { Noto_Sans_KR } from 'next/font/google'; import '@/src/styles/global.scss'; const notoSansKr = Noto_Sans_KR({ subsets: ['latin-ext'], // 확장된 라틴 문자를 포함해 한글과 영문 모두 지원 가능 style: ['normal'], weight: ['400', '500', '600', '700'], // 각 굵기에 따른 스타일 적용 가능 display: 'swap', // 폰트가 로드되는 동안 시스템 폰트 사용하다, 로드가 완료되면 지정된 폰트로 교체 fallback: ['system-ui', 'arial'], // 지정한 폰트 사용 불가 시 대체 폰트를 순서대로 나열 }); export const metadata: Metadata = { title: 'title', description: 'description', }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="ko"> <body className={notoSansKr.className}> // body의 className에 변수명 써서 font 설정 <main>{children}</main> </body> </html> ); }
틀리더라도 🌸🌈🌷예쁘게 지적해주세요💕❣️