폰트 최적화의 필요성

잘 최적화된 글꼴 전략은 로드 시간을 개선하고 layout shifts을 완화하며 사용자 경험 UX에 긍정적으로 기여합니다.

Next.js 14의 @next/font 모듈의 장점

@next/font 모듈은 빌드 시 CSS 및 글꼴 파일을 다운로드하고 다른 정적 자산과 함께 호스팅함으로써 기본적으로 Google Fonts와 같은 외부 서비스에 대한 추가 브라우저 요청이 필요하지 않고도 폰트를 사용할 수 있게 해줍니다.
이는 cdn을 통한 글꼴 제공업체와의 데이터 공유를 제거하여 프로세스를 간소화하고 개인 정보 보호를 강화할 뿐만 아니라 전체 성능에 영향을 미칠 수 있는 귀중한 로드 시간을 크게 단축합니다.
@next/font의 다른 핵심 기능은 CSS의 size-adjust 속성의 자동 사용 기능입니다. 이 속성은 폰트를 로딩하는 과정에서 서로 다른 폰트 사이즈 크기로 인하여 렌더링하며 생기는 layout shifts를 방지합니다.
By addressing this aspect, @next/font contributes to a stable visual experience as users navigate the web application, a critical factor for both retention and SEO rankings. 이러한 측면에서 @next/font 모듈은 웹페이지를 탐색하는 사용자에게 일관적인 시각적 경험을 제공합니다. 일관적 시각 경험은 유지율과 SEO에 중요한 요소입니다.
그리고 @next/font 모듈은 갖고 있는 폰트 파일를 적용해 사용할 수 있어서 구글폰트에만 국한하여 사용할 수 있는 것은 아닙니다.

요약
With @next/font, the integration of Google Fonts respects both performance and user privacy. This module allows you to incorporate Google Fonts and have them automatically self-hosted, with zero external calls during runtime, ensuring faster load times. A performance-centric example with @next/font is as follows:

코드

폰트를 고를때 생각해야할 점

Compressed font formats such as WOFF2 must be preferred for their small file sizes and compatibility. Minimalism in font choices—sticking to Regular, Italic, and Bold—avoids bloat from excess font files and reduces the application’s load time.
WOFF2와 같은 파일 포맷이 작은 사이즈와 호환성 때문에 선호됩니다. 글꼴 선택에서 간단한 스타일 (보통, 기울임, 굵게)을 사용하는 미니멀리즘을 통해서 불필요한 글꼴 파일을 줄이고 애플리케이션의 로드 시간을 감소시키자.

구글 폰트 사용하는 코드

이하 모두 싱글 페이지 usage이다. 만약 루트 layout.ts에 넣었다면 글로벌로 적용되겠지만

import { Inter } from 'next/font/google';

export const inter = Inter({
 display: 'swap',
 subsets: ['latin'],
 weights: ['400', '400i', '700'],
});

self-hosting custom font 사용하는 코드(나중에 할 것 adobe Font)

import { createFont } from 'next/font';

export const myCustomFont = createFont({
 name: 'MyCustomFont',
 assetPrefix: 'https://my-cdn.com',
});

export default function MyApp({ Component, pageProps }) {
 return (
   <main className={myCustomFont.className}>
     <Component {...pageProps} />
   </main>
 )
}

/* Your global stylesheet */
@font-face {
 font-family: 'MyCustomFont';
 src: url('https://my-cdn.com/fonts/my-custom-font.woff2') format('woff2');
 font-weight: normal;
 font-style: normal;
}

로컬 폰트 파일 사용하는 코드

import localFont from 'next/font/local'

// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' })

export default function MyApp({ Component, pageProps }) {
 return (
   <main className={myFont.className}>
     <Component {...pageProps} />
   </main>
 )
}

/* Example using unicode-range in @font-face */
@font-face {
 font-family: 'MyCustomFont';
 src: url('https://my-cdn.com/fonts/my-custom-font.woff2') format('woff2');
 unicode-range: U+0000-00FF; /* Only include Latin characters */
}

참고

https://borstch.com/blog/development/handling-fonts-efficiently-in-nextjs-14
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
https://blog.logrocket.com/next-js-font-optimization-custom-google-fonts/