웹폰트 로딩이 튀면 확인 순서

웹폰트 문제는 브라우저, 네트워크, CSS 중 어디서 터지는지 빠르게 파악하는 게 핵심이다. 직접 경험해보니 화면만 보고 판단하면 놓치는 부분이 많다.

먼저 확인할 것: 폰트가 다운로드되는가

브라우저 Network 탭을 열고 폰트 파일의 상태를 본다. 요청이 있는지, 실패했는지, 캐시된 건지를 먼저 확인하면 범위가 확 줄어든다. 로컬과 배포 환경에서 다르게 보일 수 있으니 둘 다 확인한다.

폰트 렌더링 순서 확인

폰트-display 속성 값에 따라 보이는 모습이 달라진다. swap, fallback, optional 등 각각 다른 동작을 한다. 특히 첫 로드 시 텍스트가 안 보이거나 폰트가 바뀌는 현상이라면 이 부분을 먼저 체크한다.

# 빌드 후 폰트 참조 확인
npm run build
# 생성된 CSS에서 font-display 설정 확인
grep -r "font-display" dist/

파일 크기와 로드 시간

폰트 파일이 크거나 네트워크가 느리면 렌더링이 지연된다. 브라우저 개발자 도구에서 Paint Timing 섹션을 보면 폰트 로드가 페인트를 블로킹하는지 확인할 수 있다. 필요하면 폰트를 subset하거나 변수 폰트를 쓸 수 있다.

환경별 차이점 확인

로컬 개발 환경과 배포 환경에서 폰트 경로가 다를 수 있다. public 폴더를 쓰는지, CDN을 쓰는지, 상대 경로가 맞는지 확인한다. 특히 베이스 경로(subpath)가 있는 배포라면 주의가 필요하다.

# 실제 서비스되는 폰트 확인
curl -I https://example.com/fonts/main.woff2

마지막: 실제 기기에서 확인

모바일과 데스크톱, 4G와 WiFi, 처음 방문과 재방문 등 다양한 환경에서 테스트한다. 특히 느린 네트워크를 시뮬레이션해서 사용자 경험을 확인한다. 결과를 기록해두면 다음에 비슷한 문제가 나올 때 빠르게 처리할 수 있다.