폰트 다운
웹폰트를 사용하지 않고 직접 폰트를 다운받아서 사용했다.
폰트 적용
layout.tsx
(최상단 layout)
import localFont from "next/font/local"; // ⬅️ add
const pretendard = localFont({ // ⬅️ add
src: "../styles/font/PretendardVariable.woff2",
display: "swap",
weight: "45 920",
variable: "--font-pretendard",
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={`${pretendard.variable}`}> // ⬅️ add
<body className="bg-background font-pretendard"> // ⬅️ add
<main>
{children}
</main>
</body>
</html>
);
}tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
fontFamily: { // ⬅️ add
pretendard: ["var(--font-pretendard)"],
},
...
},
},
plugins: [],
};실제 활용 방법 예제
<div className="text-3xl">
<p className="font-thin">Pretendard Test</p>
<p className="font-extralight">Pretendard Test</p>
<p className="font-light">Pretendard Test</p>
<p className="font-regular">Pretendard Test</p>
<p className="font-medium">Pretendard Test</p>
<p className="font-semibold">Pretendard Test</p>
<p className="font-bold">Pretendard Test</p>
<p className="font-extrabold">Pretendard Test</p>
<p className="font-black">Pretendard Test</p>
</div>결과
