반응형
경로 이 괴랄한거 때문에 몇십분동안 빙빙돌았다. (근데 사실은 경로문제가 아니였던거지;;;)
공식문서 보고 그대로 Array로 넣으려니까 컴파일이 자꾸 안되는거임?
일단 폰트파일 경로는 app 하위에 위치
// app/layout.tsx
const AppleSDGothicNeo = localFont({
src: [
{
path: "./fonts/AppleSDGothicNeoR.woff2",
weight: "400",
style: "normal",
},
{
path: "./fonts/AppleSDGothicNeoM.woff2",
weight: "500",
style: "medium",
},
{
path: "./fonts/AppleSDGothicNeoSB.woff2",
weight: "600",
style: "semibold",
},
{
path: "./fonts/AppleSDGothicNeoB.woff",
weight: "700",
style: "bold",
},
],
variable: "--font-apple-gothic",
});
공식문서랑 똑같이 추가해준다.
컴파일이 안되면 폰트 자체에 문제가 있는지 의심해볼 것.
나같은경우 AppleSDGothicNeoB woff2 파일만 컴파일을 못해서 woff로 대체했다.
단건으로 넣을땐 잘되는데, 배열로 넣으니까 안되서 한참을 해맸음... 하나씩 소거해보고 겨우 답 찾았네
<body className={`antialiased relative ${AppleSDGothicNeo.className} ${AppleSDGothicNeo.variable}`}>
{children}
</body>
반응형
'[IT] 프로덕트 개발 > Next.js' 카테고리의 다른 글
| Next app router slug 추출하기 / url params 가져오기 / 다이나믹 파람스 dynamic params / Next 쿼리파람 가져오기 / 쿼리스트링 가져오기 (1) | 2024.09.20 |
|---|---|
| nextjs public 폴더 경로 / nextjs 이미지 경로 설정 (0) | 2024.09.13 |