> 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 %}
이렇게 설정해주면 완료됩니다.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/03./1.-local-font.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.