기본 글꼴 추가
next.js는 구글 폰트에서 제공하는 폰트를 지원하는 'next/font/google' 패키지가 있다.
사용법
import { 글꼴명 } from "next/font/google"; // 문법
import { Nanum_Pen_Script } from "next/font/google"; // 예제예시
Inter라는 구글 폰트를 사용하기 위해 가져오려면
import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });사용
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';//가져오기
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>//이렇게 지정
</html>
);
}이런식으로 가져올 수 있다.
또한 하위 집합을 설정할 수 있다. (예: subset
subset?!
서브셋은 폰트에서 특정 글꼴만 불러오게 하는 폰트 최적화 기법 중 하나이다.
예를 들어 A라는 폰트가 '우크라이나', '불가리아어', '세르비아어', '영어' 등 다양한 언어를 지원하는데, 실제 필요한 건 영어 뿐이라면 영어와 관련된 서브셋만 지정해서 불러오면 폰트의 크기를 최적화 할 수 있다.
자주 사용하는 서브셋
| 서브셋 | 설명 | 지원 언어 |
|---|---|---|
| cyrillic | 키릴 문자 집합을 포함합니다. 이 문자 집합은 주로 동유럽과 중앙아시아의 언어에서 사용됩니다. | |
| 러시아어, 우크라이나어, 불가리아어, 세르비아어(키릴 문자), 카자흐어 등. | ||
| latin | 기본 라틴 문자 집합을 포함합니다. 이 집합은 서유럽 언어의 대부분에서 사용됩니다. | 영어, 프랑스어, 독일어, 스페인어, 이탈리아어, 포르투갈어 등. |
| latin-ext | 기본 라틴 문자 집합을 포함하며, 동유럽과 다른 언어에서 사용하는 확장된 라틴 문자를 추가로 포함합니다. | 폴란드어, 체코어, 슬로바키아어, 헝가리어, 루마니아어 등. |
| vietnamese | 베트남어 문자 집합을 포함합니다. 베트남어는 라틴 알파벳을 사용하며, 다수의 발음 기호와 특수 문자가 포함됩니다. | 베트남어 |
구글 폰트에서는 한국어는 서브셋으로 지원하지 않는다. 그래서 폰트 자체가 한글을 지원하는 경우, Noto Sans Kr같은 폰트를 사용할 수 있다. 이때 preload 옵션을 false로 설정하는 것도 하나의 방법이다.
preload 옵션을 false로 설정하는 이유는 페이지가 로드될 때 폰트를 미리 로드하지 않도록 하기 위해서이다.
import { Noto_Sans_JP } from 'next/font/google';
const notoSansJapanese = Noto_Sans_JP({
weight: '400',
preload: false,
});
