[FIX] 폰트 OTS 오류 해결

[ohprettyhak]

🌍 이슈 번호

• [FIX] 폰트 OTS 오류 해결 #57

✅ 작업 내용

• pretendard 폰트의 의존성 패키지를 설치하여, 폰트 css를 불러오는 방식으로 변경했습니다.

♾️ 기타

• next/font 방식으로 폰트를 최적화 하는 것이 가장 좋을거라고 생각했으나, 현재 Pretendard 폰트는 구글 웹폰트에 업로드 되어 있지 않아 Local Fonts 방식을 사용해야 하는 상황이었습니다.
• 하지만, 위의 방식을 적용하면 폰트 파일을 로컬에 가지고 있어야 한다는 단점이 존재하며 버전 관리가 힘들 거 같아 폰트 의존성을 추가하였습니다.

[netlify]

✅ Deploy Preview for hufscheer-manager ready!

Name	Link
🔨 Latest commit	4ff8ce2
🔍 Latest deploy log	https://app.netlify.com/sites/hufscheer-manager/deploys/65e83b8fc9677a0008c1e885
😎 Deploy Preview	https://deploy-preview-58--hufscheer-manager.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for hufscheer ready!

Name	Link
🔨 Latest commit	4ff8ce2
🔍 Latest deploy log	https://app.netlify.com/sites/hufscheer/deploys/65e83b8f50cd770008abe865
😎 Deploy Preview	https://deploy-preview-58--hufscheer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[HiimKwak]

그럼 기존 방식은 next local font로 폰트를 외부에서부터 가져와서 사용하고 있던거고, 바뀐 방식은 pretendard 폰트의 한 버전을 아예 의존성으로 추가해 고정적으로 관리하는 방식인건가요?

[ohprettyhak]

그럼 기존 방식은 next local font로 폰트를 외부에서부터 가져와서 사용하고 있던거고, 바뀐 방식은 pretendard 폰트의 한 버전을 아예 의존성으로 추가해 고정적으로 관리하는 방식인건가요?

기존 방식은 vanilla-extract의 globalFontFace를 이용해 css를 임포트하는 방식이었는데요, Pretendard에서 제공하는 css를 열어보면 폰트 파일을 url(../../../packages/pretendard/dist/web/static/woff2/Pretendard-Black.woff2) 와 같이 불러오도록 구현 했더라구요. 이 경우 상대 경로 문제로 인해 OTS parsing error가 뜨면서 폰트가 정상적으로 로드되지 않았습니다.

이번 이슈에서는 위의 문제 개선 방법을 고민하다가 Next Local Fonts를 사용하는 것 보다는 Pretendard 의존성으로 추가하는 게 낫다고 판단했습니다.

[seongminn]

거슬렸는데 고생하셨습니다! pretendard가 구글 폰트에 등록을 하려고 계속 시도 중인데 생각보다 까다로워서 쉽지 않은 상황이라고 하더라구요.

기존에 cdn으로 import 해오던 폰트를 아예 의존성으로 설치해버려서 로컬 폰트처럼 관리하는 것으로 보이는데 맞을까요? 좋은 방법인 것 같습니다!

[ohprettyhak]

거슬렸는데 고생하셨습니다! pretendard가 구글 폰트에 등록을 하려고 계속 시도 중인데 생각보다 까다로워서 쉽지 않은 상황이라고 하더라구요.

기존에 cdn으로 import 해오던 폰트를 아예 의존성으로 설치해버려서 로컬 폰트처럼 관리하는 것으로 보이는데 맞을까요? 좋은 방법인 것 같습니다!

네 맞습니다!