📚공부

Next.js Local Fonts 로컬 폰트 적용

주인가미 2024. 12. 13. 14:52
반응형

 

Next.js Local Fonts 로컬 폰트 적용

Next.js로 로컬에서 폰트를 적용하는 법을 요약해 둔다.

 

    1. fonts 폴더에 원하는 폰트를 다운로드
    2. layout.js에 아래와 같이 작성
      1. localFont를 불러오고
      2. const 폰트명 = localFont({src: "경로",})
        • 그 외 font-display 속성 조정 가능
          • display: 'auto'브라우저에 맡김. 대부분 block으로 처리됨
          • display: 'block'폰트가 다운로드 되기 전엔 아예 안보였다가, 다운로드 완료 되면 보여줌
          • display: 'swap'폰트가 다운로드 되기 전엔 시스템 기본 글꼴로 보여줬다가, 다운로드가 완료 되면 해당 폰트로 보여줌
          • display: 'fallback'100ms 동안 아무것도 안보여 주다가, 100ms가 지나서도 다운로드가 다 안됐으면 시스템 기본 폰트로 보여주고 그 전에 다운로드 됐으면 해당 폰트를 보여줌
          • display: 'optional'fallback과 비슷하나 인터넷 상태에 따라 적용이 안될 수도 있다 함
          • 3초 내에 다운로드가 다 됐으면 해당 폰트로 보여줌
      3. 폰트변수명을 클래스로 부여 이하 참고(예: body에 className={`${seoulNamsan.variable} antialiased`} )
// layout.js

import localFont from "next/font/local";

const 폰트변수명seoulNamsan = localFont({
  src: "./fonts/폰트명SEOULNAMSANB.ttf",
});


export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <body
        className={`${폰트변수명seoulNamsan.variable} antialiased`}
      >
        {children}
      </body>
    </html>
  );
}

 

tailwindcss를 사용중이라면, tailwind.config.js에 아래처럼 폰트변수명(layout에 추가했던)을 추가

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        폰트변수명seoulNamsan: ['var(--작명font-seoul-namsan)'],
      }
    },
  },
  plugins: [],
};

 

반응형