1. Local font

Created by 정우문, last modified by 정지민 on 2024-02-07

이 문서는 로컬 폰트 파일을 사용하여 Nextjs 앱에서 사용자 정의 폰트를 설정하는 방법입니다.

Local font files

src/lib/common/ui/fonts 폴더를 생성하고 Pretendard 폰트 파일을 복사합니다. ( public/assets/fonts 폴더를 생성하여도 무관 )

src/lib/common/ui/ 폴더에 font.ts 파일을 생성합니다.

다음 코드를 입력합니다.

src/lib/common/ui/font.ts

import localFont from 'next/font/local';

export const fontDefault = localFont({
  src: [
{ path: './fonts/Pretendard-Bold.woff2', weight: '700', style: 'bold' },
{ path: './fonts/Pretendard-Medium.woff2', weight: '500', style: 'medium' },
    { path: './fonts/Pretendard-Regular.woff2', weight: '400', style: 'normal' }
  ],
  display: 'swap',
variable: '--font-default'
});

layout.tsx

src/app/layout.tsx에 import 후 html에 variable로 폰트를 지정합니다.

예:

src/app/[locale]/layout.tsx

import { fontDefault } from '@/lib/common/ui/font';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
<html lang="ko" className={`${fontDefault.variable}`}>
      <body>{children}</body>
    </html>
  );
}

config (tailwind.config.js)

Tailwind 설정에서 커스텀 폰트를 추가합니다.

tailwind.config.js

module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
default: ['var(--font-default)']
      }
    }
  }
};

globals.css

글로벌 스타일에서 기본 폰트로 적용합니다.

globals.css

@layer base {
  html[lang='ko'] {
@apply font-default;
  }
}

이렇게 설정해주면 완료됩니다.

이전03. 퍼블 가이드 다음2. Checkbox

마지막 업데이트 2개월 전