Next.JS Font

Next,js에서는 개인 정보 보호 및 성능 향상을 위해 커스텀 글꼴을 포함한 글꼴을 자동으로 최적화하고 외부 네트워크 요청을 제거한다. 사용된 size-adjust CSS 속성 덕분에 레이아웃 변경 없이 웹 글꼴을 최적으로 로드할 수 있다. CSS 및 글꼴 파일은 빌드 때 다운로드되며 나머지 정적 자산과 함께 자체 호스팅된다.

Font 파일

브라우저이 대부분 woff2를 지원하기 때문에 웹 폰트는 woff나 woff2를 넣어도 된다. 미리보기 og 이미지 생성에 쓰이는 폰트는 ttf가 컴파일 속도가 더 빨라서 권장된다.

TTF

Mac 및 Windows 운영 체제에서 가장 일반적인 글꼴이다. IE8은 TTF를 지원하지 않고 IE9부터 부분적 지원을 한다.

단점: 글꼴이 압축되지 않아 결과적으로 파일 크기가 크다.(로딩 속도 문제발생)

WOFF

모든 주요 브라우저에서 지원하는 메타 데이터 및 압축 기능을 갖춤 글꼴이 압축되어 있기 때문에 로드가 더 빠르다. 메타 데이터를 사용하면 저작권 문제를 해결하기 위해 글꼴 파일에 라이센스 데이터를 포함 할 수 있다.

장점: 글꼴이 압축 되어 있어서 로드 속도가 빠르다.

WOFF2

WOFF 차세대버전. WOFF2 형식은 원래 WOFF보다 평균 30 %의 압축적 이득을 제공한다. 권장 업그레이드이기 때문에 WOFF를 광범위하게 지원하지는 않는다.

localFont

local font 파일을 사용할 수 있게 해준다. 성능과 유연성을 위해 가변 글꼴 사용이 권장된다.

// Tailwind CSS 사용
import localFont from 'next/font/local';


const pretendard = localFont({
  src: [
    {
      path: '../public/fonts/PretendardVariable.woff2',
    },
  ],
  variable: '--font-pretendard',
});


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='ko'>
      <body className={`${pretendard.variable} font-pretendard`}>
        {children}
      </body>
    </html>
  );
}

const config: Config = {
content: [
  './pages/**/*.{js,ts,jsx,tsx,mdx}',
  './components/**/*.{js,ts,jsx,tsx,mdx}',
  './app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
  extend: {
    fontFamily: {
      pretendard: ['var(--font-pretendard)'],
    },
}

googleFont

Next.JS는 모든 Google 글꼴을 자동으로 자체 호스팅한다. 폰트는 배포에 포함되며 배포와 동일한 도메인에서 제공되며 브라우저는 구글로 요청을 보내지 않는다.

import { Noto_Sans_KR } from 'next/font/google'


const noto = Noto_Sans_KR({ subsets: ['latin'] })


export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="kr">
      <body className={noto.className}>
          {children}
      </body>
    </html>
  )
}