목표
Next.js 프로젝트에서 구글폰트를 사용하여 폰트를 적용하는 방법에 대해 알아보고 학습한다.
적용 방법
1. 원하는 폰트를 선택하기
적용하고자하는 폰트를 google fonts에서 검색하여 font-family를 알아둡니다.
2. 폰트 및 추가속성 적용예시
const inter = Inter({
subsets: ['latin'],
weight: ['400', '700'],
display: 'swap',
fallback: ['Arial', 'sans-serif'],
variable: '--inter-font'
})위와 같은 형식으로 폰트정보를 입력하여 적용할 수 있습니다.
세부적인 코드 및 추가속성을 정리하자면 다음과 같습니다.
- Inter : next/font/google에서 제공하는 Inter 폰트 로더를 사용
- subsets : 폰트의 서브셋을 설정 , 필요한 문자만을 불러와서 로딩속도를 최적화할 수 있음
- display : 폰트 로딩 방식을 제어
( swap : 폰트 로딩시 시스템 폰트를 먼저표기 후 로딩이 완료되면 교체 ) - weight : 폰트의 굵기 ( ex. 400-기본 , 700-bold )
- style : 폰트의 스타일 ( ex. normal, italic )
- variable : 커스텀 변수이름 설정 ( ex. variable: '--inter-font' )
- fallback : 폰트 적용 실패시 사용할 폰트 목록 ( ex. variable: '--inter-font' )
- perload : 폰트를 미리 로드할지에 대한 여부설정 ( default : true )
3. 폰트를 layout.tsx에 작성하여 적용
google fonts 사이트에서 제공하는 코드를 사용해서 적용해도 되지만
Next.js는 @next/font 를 지원하기 때문에 이를 활용하면 보다 쉽게 폰트적용을 할 수 있습니다.
아래 코드는 layout.tsx 전체코드이며, layout.tsx에 폰트정보를 추가하여 적용하는 방식입니다.
import type { Metadata } from "next";
import { Inter } from 'next/font/google';
import "./globals.css";
const inter = Inter({
subsets: ['latin'],
display: 'swap',
weight: ['400', '700'],
variable: '--inter-font',
});
export const metadata: Metadata = {
title: "My Next.js App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>
{children}
</body>
</html>
);
}
( 내용 추가 )
추가로 학습한 내용 정리
폰트를 정의하고 왜 className으로 할당하는가?
위에서 다른 코드를 예시로 들자면,
inter로 폰트에 대한 정보를 정의했는데 className이라는 속성을 사용하여
폰트를 적용했습니다. 이 부분이 궁금해서 추가로 찾아봤습니다.
inter를 정의하기위해 사용된 Inter에 이미 className이라는 속성이 포함되어있습니다.
이 속성은 자동으로 생성된 CSS 클래스 이름을 나타냅니다.
그렇기 때문에 이를 html이나 body태그에 적용하면 폰트가 적용되는 방식입니다.
반응형