---
title: "HN에만 커스텀 폰트가 안 먹히는 미스터리"
published: 2026-01-24T23:06:43.000Z
canonical: https://jeff.news/article/1187
---
# HN에만 커스텀 폰트가 안 먹히는 미스터리

접근성 모바일 브라우저에서 OpenDyslexic 폰트 오버라이드가 모든 사이트에서 되는데 HN에서만 안 되는 현상. CSS는 적용되지만 렌더링이 폴백되는 원인 불명의 이슈.

- 접근성 기능이 있는 모바일 브라우저(WebKit 기반)를 만드는 개발자가 OpenDyslexic 폰트를 페이지에 오버라이드하는 기능을 구현했는데, **모든 사이트에서 다 되는데 Hacker News에서만 안 됨**
- `@font-face`를 base64 data URL로 인라인하고, `* { font-family: 'OpenDyslexic' !important; }`로 전체 적용. 인스펱터에서 CSS는 제대로 적용된 게 보이는데 실제 렌더링은 sans-serif로 폴백됨
- blob URL, MutationObserver로 재적용, 특정 엘리먼트 타게팅(`font`, `td`, `table`), setTimeout 딜레이 등 온갖 시도를 다 해봤지만 HN에서만 안 됨
- CSP(Content Security Policy)와 CORS는 base64가 DOM 안에 있으니 원인이 아닐 거라고 판단하고 있음
- HN의 마크업이나 헤더에 `@font-face`를 조용히 실패시키는 뭔가가 있는 건지 질문 중

## 핵심 포인트

- @font-face를 base64 data URL로 인라인해도 HN에서만 렌더링 폴백
- 인스펙터에서는 font-family가 적용된 것으로 보이지만 실제 렌더링은 sans-serif
- blob URL, MutationObserver, setTimeout 등 온갖 시도 실패
- CSP/CORS는 원인 아닌 것으로 판단

## 인사이트

HN의 레거시 마크업(font 태그, 테이블 레이아웃)이 WebKit의 폰트 매칭에 영향을 주는 것으로 추정되는 흥미로운 엣지 케이스.