1. local font

Local font files

src/app/assets/fonts 폴더를 생성하고 local font 파일을 복사한다.

( public/assets/fonts 폴더를 생성하여도 무관 )

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',
});

layout.tsx

src/app/layout.tsx에 import 후 html에 variable로 font 지정

import { familyMont } from '@/assets/font';
...
  <html lang="ko" className={`${familyMont.variable}`}>

config

tailwind.config.js

module.exports = {
  ...
  theme: {
    extend: {
      fontFamily: {
         mont: ['var(--font-mont)'],
      },
      fontWeight: {
        default: '400',
        regular: '400',
        medium: '500',
        bold: '700'
      },

테스트를 위해서 page.tsx에 넣어본다.

export default function Home() {
  return (
    <>
      <div>Hello World</div>
      <div className="font-mont">Hello World (font-mont)</div>
    </>
  );
}

globals.css

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

설정해주면 완료된다.

'Next.js 개발 가이드 > 03. 퍼블 가이드' 카테고리의 다른 글

3. Button variants (0)	2023.12.17
2. checkbox (1)	2023.12.17