[Next] 폰트 변경

2024. 5. 8. 09:41· REACT & NEXT
목차
  1. next/font

next.js 에서 폰트 변경하는 법

crate-next-app으로 next로 시작하게 되면 모든 google 폰트가 자동 배포가 포함되어 있다.

next/font

  • next/font를 사용하게 되면 폰트를 최적으로 로드할 수 있음
  • 모든 글꼴 파일에 대한 자동 자체 호스팅이 내장되어 있음
  • 브라우저 캐싱 & 프리로딩을 지원하여 페이지 로딩 속도를 높일 수 있음
  • next/font/google
    • 구글 폰트의 CDN 서비스를 통해 폰트 불러옴
    • SSR과 CSR 지원
  • next/font/local
    • 웹 폰트 다운로드 시간 절약, 오프라인 사용 가능성 제공
    • 이미지와 마찬가지로 클라이언트 측에서 파일 다운 X, 페이지 로드 속도 향상
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

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

사용자가 원하는 폰트로 변경하기 위해 로컬 파일에 폰트 파일을 별도로 저장하거나 cdn으로 가져오면 변경이 가능하다.
그 방법으로는

import localFont from "next/font/local"

const pretendard = localFont({
  src: "../../public/fonts/PretendardVariable.woff2",
  display: "swap",
  weight: "400 700",
});

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

정상적으로 폰트가 변경된 걸 확인할 수 있다.

'REACT & NEXT' 카테고리의 다른 글

[Next] 환경 변수 사용하기 (.env)  (0) 2025.01.14
[React] css module 사용하기  (1) 2024.08.27
[Next] CSR, SSR, SSG 의 차이  (0) 2024.08.16
[Next] next/image  (0) 2024.05.31
[Next]Next.js + TypeScript 시작하기  (1) 2024.03.26
  1. next/font
'REACT & NEXT' 카테고리의 다른 글
  • [React] css module 사용하기
  • [Next] CSR, SSR, SSG 의 차이
  • [Next] next/image
  • [Next]Next.js + TypeScript 시작하기
seominki
seominki
seominki
minki's blog
seominki
전체
오늘
어제
  • LIST (43)
    • JAVASCRIPT (11)
    • TYPESCRIPT (7)
    • REACT & NEXT (6)
    • VUE (8)
    • WEBPACK (3)
    • FIREBASE (1)
    • LINUX (1)
    • GIT (2)
    • 자료구조 & 알고리즘 (2)
    • CS (0)
    • HTML&CSS (1)
    • AWS (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

최근 글

hELLO · Designed By 정상우.v4.2.2
seominki
[Next] 폰트 변경
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.