> 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/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/03.-publishing-guide/1.-local-font.md). # 1. Local font Created by 정우문, last modified by 정지민 on 2024-02-07 This document explains how to set up a custom font in a Next.js app using local font files. *** {% stepper %} {% step %} ### Local font files * Create the src/lib/common/ui/fonts folder and copy the Pretendard font files into it. (Creating a public/assets/fonts folder instead is also fine.)

{% endstep %} {% step %} ### Create a font.ts file in the src/lib/common/ui/ folder. Enter the following code. {% 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 After importing it in `src/app/layout.tsx`, specify the font as a variable on `html`. Example: {% 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) Add the custom font in the Tailwind configuration. {% code title="tailwind.config.js" %} ```javascript module.exports = { // ... theme: { extend: { fontFamily: { default: ['var(--font-default)'] } } } }; ``` {% endcode %} {% endstep %} {% step %} ### globals.css Apply it as the default font in the global styles. {% code title="globals.css" %} ```css @layer base { html[lang='ko'] { @apply font-default; } } ``` {% endcode %} {% endstep %} {% endstepper %} With this configuration, you're done.