Canvas Fingerprinting과 CSS Font Loading API를 결합한 런타임 실제 렌더링 폰트 탐지 설계

How to Detect Which Font Is Actually Rendering in a Browser (Not Just the CSS Stack)

SHOTA2026년 6월 27일6분intermediate

AI 요약

Context

getComputedStyle().fontFamily가 렌더링된 결과값이 아닌 CSS 우선순위 리스트(Fallback Stack)만 반환하는 한계 발생. 특히 CJK 폰트처럼 글리프(Glyph) 포함 여부에 따라 문자 단위로 폰트가 교체되는 브라우저의 복잡한 렌더링 메커니즘으로 인해 실제 출력 폰트 식별이 불가능한 상황.

Technical Solution

CSS Font Loading API를 통한 1차 필터링으로 @font-face 및 명시적 요청 폰트의 로드 상태를 빠르게 확인하는 로직 설계
Canvas API의 measureText를 활용하여 기준 폰트(Monospace)와 대상 폰트의 렌더링 너비를 비교하는 Fingerprinting 기법 도입
문자별 글리프 가용성 문제를 해결하기 위해 요소 내 실제 텍스트 중 대표 문자를 추출하여 검증하는 Heuristic 접근 방식 적용
브라우저 샌드박스로 인한 OS 폰트 메타데이터 접근 불가 제약을 해결하기 위해 300여 종의 폰트 정보를 포함한 Static JSON Lookup Table 구축
Web Font(API)와 System Font(Canvas) 탐지 경로를 순차적으로 실행하는 Two-pass Resolve 전략으로 탐지 정확도 확보

실천 포인트

- CSS 선언값과 실제 렌더링 결과의 괴리를 인지하고 런타임 측정 기반의 검증 프로세스 구축 - Canvas 기반 너비 측정 시 우연히 일치하는 너비로 인한 False Positive 방지를 위해 다중 문자 검증 로직 검토 - 클라이언트 사이드 제약 사항(OS 접근 제한) 발생 시 로컬 메타데이터 DB를 통한 데이터 보완 전략 활용

태그

#CSS Font Loading API #Fallback Stack #Canvas Fingerprinting #Glyph Rendering #CJK Fonts

원문 읽기