🔠Next font 최적화

Viking_J·2024년 12월 22일

uncook

😤 문제

“어떤 문제가 있었나요”

폰트를 다운로드 하는 데 오래 걸렸다.

🧐 문제 원인

“문제 원인이 무엇인가요”

CDN으로 받아오는 데 시간이 오래 걸린다.

😎 해결책

“해결책”

폰트를 다운로드하고 next/font를 사용한다.

🤔 이유

“왜 이런 해결책 사용했나요”

셀프 호스팅 + next font

다른 곳에 요청을 해서 폰트를 받지 않고 내 서버에서 받으면 빠르기 때문에 폰트를 다운로드해서 빌드해둔다.

next font (next 공식문서)

next/font는 폰트(맞춤형 폰트 포함)를 자동으로 최적화하고 외부 네트워크 요청을 제거하여 개인정보 보호와 성능을 향상시킵니다.
next/font는 모든 폰트 파일에 대해 자동 자체 호스팅을 기본적으로 제공합니다. 이를 통해 size-adjust CSS 속성을 활용하여 레이아웃 이동 없이 웹 폰트를 최적의 방식으로 로드할 수 있습니다.
이 새로운 폰트 시스템은 Google Fonts도 성능과 개인정보 보호를 고려하여 편리하게 사용할 수 있도록 합니다. CSS와 폰트 파일은 빌드 시 다운로드되며 나머지 정적 자산과 함께 자체 호스팅됩니다. 브라우저에서 Google로 요청이 전송되지 않습니다.

즉 셀프 호스팅 + fallback font 최적화로 레이아웃 이동 최소화해준다.

원하는 폰트와 가장 비슷한 폰트를 자동으로 fall back font를 넣어주는 게 참 신기하다

🤩 적용

“어떻게 적용했나요”

import localFont from 'next/font/local'

const pretendard = localFont({
  src: '../public/fonts/PretendardVariable.woff2',
  display: 'swap',
  weight: '45 920',
  preload: true,
})

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ko" className={`${pretendard.className} size-full`}>
      <body className="size-full">
        <div className="size-full overflow-x-hidden">{children}</div>
      </body>
    </html>
  )
}

FCP 1초 개선!

Viking_J

모험을 떠나보자

이전 포스트

⛏️selector로 렌더링 최적화 (react,next js)

다음 포스트