Next 14에서 Font 적용하기

pretendard : [GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform](https://github.com/orioncactus/pretendard) -> 가장 예쁨!

위의 github에서 파일을 다운로드 받은 후 web - variable - woff2 에 있는 PretendardVariable.woff2 파일을 app 폴더의 fonts 폴더를 만들어 옮겨 준다. (fonts 폴더는 app 폴더 안에 있어도 관계 없다.)

그 다음 루트 폴더의 layout.tsx에서 다음과 같이 작성한다.

```javascript
import localFont from "next/font/local";

const pretendard = localFont({
 src: "./fonts/PretendardVariable.woff2",
 display: "swap",
 weight: "45 920",
});

export default function RootLayout({
 children,
}: Readonly<{
 children: React.ReactNode;
}>) {
 return (
 <html lang="ko">
 <body className={pretendard.className}>{children}</body>
 </html>
 );
}
```

`weight` 옵션을 지정하지 않으면 WebKit 기반의 브라우저에서 굵기가 잘못 렌더링 될 수 있으니 주의해 주세요.

이렇게 하면 로컬 폰트에서 렌더링이 된다!

참고 : [Optimizing: Fonts | Next.js](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts)

Next 14에서 Font 적용하기pretendard : <a href="https://github.com/orioncactus/pretendard">GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform</a> -&gt; 가장 예쁨!위의 github에서 파일을 다운로드 받은 후 web - variable - woff2 에 있는 PretendardVariable.woff2 파일을 app 폴더의 fonts 폴더를 만들어 옮겨 준다. (fonts 폴더는 app 폴더 안에 있어도 관계 없다.)그 다음 루트 폴더의 layout.tsx에서 다음과 같이 작성한다.<pre><code class="language-javascript">import localFont from "next/font/local";

const pretendard = localFont({
 src: "./fonts/PretendardVariable.woff2",
 display: "swap",
 weight: "45 920",
});

export default function RootLayout({
 children,
}: Readonly&lt;{
 children: React.ReactNode;
}&gt;) {
 return (
 &lt;html lang="ko"&gt;
 &lt;body className={pretendard.className}&gt;{children}&lt;/body&gt;
 &lt;/html&gt;
 );
}</code></pre><code class="language-javascript">weight</code> 옵션을 지정하지 않으면 WebKit 기반의 브라우저에서 굵기가 잘못 렌더링 될 수 있으니 주의해 주세요.이렇게 하면 로컬 폰트에서 렌더링이 된다!참고 : <a href="https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts">Optimizing: Fonts | Next.js</a>

나노 학습 : Next 14에서 Font 적용하기 (프리텐다드 로컬 폰트)