search
X2BEE Home

1. Local font

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

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

1

hashtag
Local font files

  • src/app/assets/fonts 폴더를 생성하고 로컬 폰트 파일을 복사합니다. ( public/assets/fonts 폴더를 생성하여도 무관 )

2

hashtag
font.ts

src/app/assets/ 폴더에 font.ts 파일을 생성합니다.

다음 코드를 입력합니다.

src/app/assets/font.ts
import localFont from 'next/font/local';

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

hashtag
layout.tsx

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

예:

src/app/layout.tsx
import { familyMont } from '@/assets/font';

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

hashtag
config (tailwind.config.js)

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

tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        mont: ['var(--font-mont)']
      }
    }
  }
};
5

hashtag
globals.css

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

globals.css
@layer base {
  html[lang='ko'] {
    @apply font-mont;
  }
}

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

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

마지막 업데이트