Next.js App에 /public/font/pretendard.woff 폰트를 설정하고 싶어 라고 GPT에 물어봤는데 다음과 같은 답변이 왔다.
마지막 2달간은 간단한 내용은 PR을 올리지 않기로 했는데, 내 프로젝트에 이런 코드들이 있었고 화면이 꿈틀 layout shift가 발생했다. h1 과 같은 일부 태그에는 pretendard가 적용되어 있지 않았고, 누군가 해당 태그에 Pretendard를 추가하는 PR을 올렸다.
next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance. next/font includes built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.
Local Fonts
Import next/font/local and specify the src of your local font file. We recommend using variable fonts for the best performance and flexibility.
import localFont from 'next/font/local'
const myFont = localFont({
src: '/font/pretendard.woff',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
...
],
theme: {
extend: {
fontFamily: {
pretendard: ['var(--font-pretendard)'],
},
},
},
plugins: [],
}Preloading
When a font function is called on a page of your site, it is not globally available and preloaded on all routes. Rather, the font is only preloaded on the related routes based on the type of file where it is used:
- If it's a unique page, it is preloaded on the unique route for that page.
- If it's a layout, it is preloaded on all the routes wrapped by the layout.
- If it's the root layout, it is preloaded on all routes.
GPT 3.5로 문서를 찾은 결과물이 google에 검색할 때 보다 항상 신뢰하기에 더 좋지 않았지만, 쉬운 방법 우리가 갖고 있던 문제를 해결할 수 있는 방법으로 변경했다.😀
'software engineering > frontend' 카테고리의 다른 글
| KeycloakJs를 이용한 다중 계정 전환 Web Component개발기 (1) | 2025.01.22 |
|---|---|
| Feature-Sliced Design(FSD): 프론트엔드 아키텍처의 새로운 접근법 (0) | 2025.01.20 |
| 인프런 퇴근길 밋업 - 테스트 코드와 스토리북 (1) | 2024.08.29 |
| 2024 FE conf (4) | 2024.08.26 |
| React 19 Beta! (0) | 2024.04.29 |
