1. font 폴더를 생성하고 다음과 같이 작성합니다.
import localFont from 'next/font/local';
export const pretendard = localFont({
src: [
{
path: './PretendardVariable.woff2',
weight: '400'
},
{
path: './PretendardVariable.woff2',
weight: '700'
}
],
variable: '--font-pretendard'
});
2. tailwind config의 extend에 다음과 같이 추가합니다.
fontFamily: {
pretendard: ['var(--font-pretendard)']
}
3. 최상단 레이아웃 html 태그에 적용합니다.
import { pretendard } from '@/utils/fonts/fonts';
import type { Metadata } from 'next';
import Script from 'next/script';
import { ToastContainer } from 'react-toastify';
import './globals.css';
import { QueryProvider } from './provider';
type Props = { children: React.ReactNode };
export default function RootLayout({ children }: Props) {
return (
<html lang="ko" className={`${pretendard.variable} font-pretendard`}>
<body>
//
</body>
</html>
);
}'Today I Learned' 카테고리의 다른 글
| [JavaScript] push, pop, shift, unshift (0) | 2024.08.09 |
|---|---|
| [JavaScript] 문자열 메서드 - replaceAll (0) | 2024.07.30 |
| [Javascript] 사용자가 접속한 기기환경 확인하기 (0) | 2024.04.28 |
| [Next.js] 반응형 css가 안먹힐 때 (1) | 2024.04.25 |
| [클룸] DB의 View 사용하기 (1) | 2024.04.23 |