LogoSEO Jing
  • All Posts
  • SEO Jing
  • KD Team
  • CLab CoreTeam
  • Study

Contact Me

© 2026 SEOJing. All rights reserved.

DevLogSEO JingInsight

폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?

2026년 3월 14일·2분 읽기

1. 폰트 미적용 문제

증상: 스토리북에서는 A2z/Paperlogy 폰트 정상인데, Next.js 메인 페이지에서는 폰트가 안 먹힘.

원인 2가지

  • globals.css의 @theme에서 --font-sans: "A2z", var(--font-geist-sans), ...로 정의했는데, --font-geist-sans가 실제로 정의되지 않아서 CSS 변수 체인 전체가 실패 - body에 font-family: var(--font-sans)를 수동으로 지정했는데, Tailwind v4는 @theme의 --font-sans를 html에 자동 매핑하므로 불필요 + 레이어 우선순위 충돌

수정

  • --font-sans에서 var(--font-geist-sans) 참조 제거 - body의 font-family 줄 제거

2. Hydration Mismatch

증상: Hydration failed 에러, 서버는 / 클라이언트는 /frontend

원인: useState(getPathFromUrl) 초기값 함수에서 typeof window === "undefined" 분기로 서버/클라이언트 초기값이 다름.

수정: useState("/")로 고정하고, useEffect에서 마운트 후 URL 동기화.

포스트 목록

/SEOJing/devLog/insight
파일 10개, 폴더 0개
엄청난 피드백생각보다 어려웠던 댓글, 완독 로컬스토리지디자인 시스템을 구축할 때 주의할 점폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?MDX DOM 트리 파싱하기MDX 관련 이슈 노트결국 Node.js 까지 와버렸다전체적인 플로우Storybook으로 디자인 시스템 테스팅하기MDX가 뭘까?