> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/03./1.-local-font.md). # 1. Local font Created by 정우문, last modified by 정지민 on 2024-02-07 이 문서는 로컬 폰트 파일을 사용하여 Nextjs 앱에서 사용자 정의 폰트를 설정하는 방법입니다. *** {% stepper %} {% step %} ### Local font files * src/lib/common/ui/fonts 폴더를 생성하고 Pretendard 폰트 파일을 복사합니다. ( public/assets/fonts 폴더를 생성하여도 무관 )

{% endstep %} {% step %} ### src/lib/common/ui/ 폴더에 font.ts 파일을 생성합니다. 다음 코드를 입력합니다. {% code title="src/lib/common/ui/font.ts" %} ```typescript import localFont from 'next/font/local'; export const fontDefault = localFont({ src: [ { path: './fonts/Pretendard-Bold.woff2', weight: '700', style: 'bold' }, { path: './fonts/Pretendard-Medium.woff2', weight: '500', style: 'medium' }, { path: './fonts/Pretendard-Regular.woff2', weight: '400', style: 'normal' } ], display: 'swap', variable: '--font-default' }); ``` {% endcode %} {% endstep %} {% step %} ### layout.tsx `src/app/layout.tsx`에 import 후 `html`에 variable로 폰트를 지정합니다. 예: {% code title="src/app/\[locale]/layout.tsx" %} ```tsx import { fontDefault } from '@/lib/common/ui/font'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` {% endcode %} {% endstep %} {% step %} ### config (tailwind.config.js) Tailwind 설정에서 커스텀 폰트를 추가합니다. {% code title="tailwind.config.js" %} ```javascript module.exports = { // ... theme: { extend: { fontFamily: { default: ['var(--font-default)'] } } } }; ``` {% endcode %} {% endstep %} {% step %} ### globals.css 글로벌 스타일에서 기본 폰트로 적용합니다. {% code title="globals.css" %} ```css @layer base { html[lang='ko'] { @apply font-default; } } ``` {% endcode %} {% endstep %} {% endstepper %} 이렇게 설정해주면 완료됩니다.