왜 폰트 최적화가 필요할까?
폰트는 웹사이트의 디자인을 위해서 굉장히 중요한 요소 중 하나다.
하지만 이런 커스텀한 폰트를 사용하기 위해서는 성능적인 영향을 미치는데, 바로 폰트 파일을 다운로드 받고 로드하는 과정이 필요하다.
그리고 폰트 파일을 다운로드하고 로드하는 과정에서 폰트의 레이아웃이 바뀐다거나 크기가 바뀐다거나 하는 과정이 생길 수 있다.
이러한 문제를 해결하기 위해서 NEXT.JS에서 제공하는 next/font 모듈을 사용하면 된다.
해당 모듈을 사용하면 폰트를 빌드할때 다운로드하고 다른 정적인 에셋들하고 같이 호스팅단다.
즉 유저가 웹사이트를 방문했을때 추가적인 네트워크의 요청없이 폰트를 적용할 수 있고, 이는 성능적으로 굉장히 큰 임팩트를 준다!
어떻게 사용하나?
fonts.ts 파일을 생성한 후 next/font/google 모듈에서 폰트를 import 시킨다.
// /api/ui/fonts.ts
import { Inter } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });그 다음 <body> 엘리먼트에 font를 추가해준다.
// /app/layout.tsx
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>
);
}또한 tailwind를 통해서 font를 추가하는 방버도 있다.
https://tailwindcss.com/docs/font-smoothing
그 외에 특정 weight를 지정해서 폰트를 추가할수도 있다.
// /app/ui/fonts.ts
import { Inter, Lusitana } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({
weight: ['400', '700'],
subsets: ['latin'],
});// /app/page.tsx
import { lusitana } from '@/app/ui/fonts';
<p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
기술만 좋은 S급이 아니라, 태도가 좋은 A급이 되자