끄적이는 개발노트

Next.js - Font 적용 본문

JavaScript/Next.js

Next.js - Font 적용

크런키스틱 2025. 4. 23. 22:23
728x90

기본적으로 Next.js에서는 next/font를 통해 기본 글꼴들을 제공해준다. 하지만 React-Native에서도 다뤘듯이 custom font를 적용하는 경우가 많기 때문에 방법을 정리한다.

 

 

1. font 파일 추가

public/assets/fonts에 다운로드한 폰트를 추가한다.

 

 

2. layout 수정

localfont를 사용하면 custom 폰트를 지정할 수 있다.

// layout.tsx

import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";

const gmarket = localFont({
  src: [
    {
      path: "../../public/assets/fonts/GmarketSansLight.otf",
      weight: "300",
      style: "light",
    },
    {
      path: "../../public/assets/fonts/GmarketSansMedium.otf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../../public/assets/fonts/GmarketSansBold.otf",
      weight: "700",
      style: "bold",
    },
  ],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={gmarket.className}>{children}</body>
    </html>
  );
}

 

 

3. 코드

globals.css는 기존 내용을 지우고 임의로 지웠다.

 

// page.tsx

export default function Home() {
  return (
    <div className="w-full h-full flex justify-center items-center bg-black">
      <p className="text-3xl text-white">폰트 테스트입니다.</p>
    </div>
  );
}
/** globals.css **/

@import "tailwindcss";

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  line-height: 1.25;
  font-size: 16px;
  font-weight: 400;
}

 

 

4. 실행

폰트가 잘 적용된 것을 확인할 수 있다.

 

728x90

'JavaScript > Next.js' 카테고리의 다른 글

Next.js 15 - Modal 구현 (with. Parallel Routes & Intercepting Routes)  (1) 2025.04.26
Next.js 15 - 전역 상태 Context API  (0) 2025.04.24
Next.js 15 - Styled-Components  (1) 2025.04.23
Next.js - userAgent 정보 확인  (0) 2023.06.23
Next.js 결제모듈 연동 - 포트원(구 아임포트) (2)  (0) 2023.06.19
'JavaScript/Next.js' Related Articles more