파피루스

react/nextJs font 적용하기 본문

React

react/nextJs font 적용하기

떼굴펜 2024. 8. 31. 23:07

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
'React' Related Articles more