Recent Posts
Recent Comments
Archives
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- array정적메서드
- Next
- error
- domain
- 리터럴
- vercel
- 코딩테스트
- 모던자바스크립트
- 셋팅
- 구글 로그인
- nextjs
- useRouter
- 프로젝트 셋팅
- 프로그래머스
- 오블완
- vscode
- 모던 자바스크립트
- 초기셋팅
- React
- 스파르타코딩클럽
- deep dive
- js
- 티스토리챌린지
- 소셜 로그인
- 내일배움캠프
- git
- CORS
- 코드카타
- 코테
- 자주 까먹는
- Today
- Total
파피루스
react/nextJs font 적용하기 본문
1. https://cactus.tistory.com/306 에서 폰트 다운로드
2. 가변 프리텐다드 woff2 를 소스코드 root 폴더 안에 위치
3. root layout 의 폰트 변경
이상하게 매번 localFont를 못 찾아서 복붙해서 넣어준다.
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
const pretendard = localFont({
src: "./fonts/PretendardVariable.woff2",
});
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="kr">
<body className={pretendard.className}>{children}</body>
</html>
);
}
4. local 띄워서 확인!
'React' 카테고리의 다른 글
[next/react] google identity platform API 테스트 (1) | 2024.09.06 |
---|---|
[nextJs/react] 매번 헷갈리는 파라미터 가져오기 (0) | 2024.09.05 |
[Error] Functions cannot be passed directly to Client Components (0) | 2024.08.04 |
[React] Hook : useCallback, useMemo (1) | 2024.05.20 |
[React] Hook : useState, useEffect, useRef, useContext (0) | 2024.05.20 |