LogoSEO Jing
  • All Posts
  • SEO Jing
  • okayJing
  • KD Team
  • CLAB Coreteam
  • Study

Contact Me

© 2026 SEOJing. All rights reserved.

폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까? | SEOJing
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 동기화.

Post Q&A

오케이징에게 물어보기

폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까? 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!

0/500

포스트 목록

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

같은 섹션의 대표 이미지

10 posts · latest first
SEO Jing26. 03. 15.

엄청난 피드백.

CLI 코드 리뷰에서 받은 피드백과 전체 코드 수정 계획을 정리했다.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

생각보다 어려웠던 댓글, 완독 로컬스토리지.

localStorage만으로 글 읽기 추적, 스크롤 진행률, 댓글 감지를 구현한 과정을 정리했다.

26. 03. 15.SEOJing
SEO Jing26. 03. 15.

MDX 관련 이슈 노트.

블로그 디테일 페이지에서 MDX를 렌더링하기 위해 검토한 라이브러리들과 최종 선택 과정.

26. 03. 15.SEOJing
SEO Jing26. 03. 14.

디자인 시스템을 구축할 때 주의할 점.

디자인 시스템 구현 시 파일 구조, 디자인 토큰, 유의 사항을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

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

Tailwind v4 환경에서 폰트가 메인 페이지에서만 적용되지 않던 원인과 Hydration Mismatch 이슈를 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

MDX DOM 트리 파싱하기.

MDX 파일의 경로 탐색 로직과 콘텐츠 트리 생성 과정을 정리했다.

26. 03. 14.SEOJing
SEO Jing26. 03. 14.

결국 Node.js 까지 와버렸다.

MDX 파일 구조를 JSON으로 변환하기 위해 Node.js의 fs 모듈을 배워봤다.

26. 03. 14.SEOJing
SEO Jing26. 03. 13.

전체적인 플로우.

SEO Jing 프로젝트의 기술 스택 선정과 전체적인 개발 플로우 정리.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

Storybook으로 디자인 시스템 테스팅하기.

Storybook의 사용법과 디자인 시스템 개발에서의 장점을 정리했다.

26. 03. 13.SEOJing
SEO Jing26. 03. 13.

MDX가 뭘까?.

MDX의 개념과 블로그에서 활용하는 이유를 정리했다.

26. 03. 13.SEOJing