웹폰트 문제 해결

웹폰트가 느릴 때,
복붙 전에 여기부터 확인.

한글 폰트는 글리프 수가 많아 웨이트를 줄이고, unicode-range 분할 서빙과 font-display, 필요한 preload만 쓰는 것이 중요합니다.

빠른 결론

한글 웹폰트가 느리게 뜰 때 웨이트, unicode-range, font-display, preload, font-family 적용 순서를 점검하는 방법입니다.

전체 웨이트를 부르면 왜 느린가요?

한글 웹폰트는 한 웨이트도 용량이 큰 편입니다. 100부터 900까지 모두 부르면 실제로 쓰지 않는 굵기까지 다운로드 후보가 되어 첫 화면 렌더링이 늦어질 수 있습니다.

Google Fonts가 상대적으로 안전한 이유

Google Fonts는 unicode-range로 폰트를 잘게 나눠 서빙합니다. 페이지에 실제로 등장한 글자 블록만 내려받을 수 있어 직접 전체 파일을 올리는 방식보다 초기 다운로드를 줄일 수 있습니다.

실무 적용 순서

본문 400, 강조 700처럼 실제 쓰는 웨이트만 남기고 display=swap을 유지하세요. 첫 화면에 반드시 필요한 자체 호스팅 폰트만 preload하고, 여러 폰트를 섞을 때는 @import/link 코드와 font-family 적용 코드를 분리해 관리하는 편이 안전합니다.

체크 순서

  1. 페이지에서 실제 사용하는 웨이트를 2~3개로 줄입니다.
  2. Google Fonts 또는 공식 CDN의 display=swap 코드를 사용합니다.
  3. 첫 화면 핵심 폰트만 preload하고 나머지는 일반 로드로 둡니다.
  4. fallback font-family를 꼭 지정해 글자 표시 지연을 줄입니다.

자주 묻는 질문

TTF 파일을 그대로 웹에 올려도 되나요?

가능하더라도 권장하지 않습니다. 웹 배포에는 WOFF/WOFF2가 더 적합하고, 라이선스에서 웹 임베딩을 허용하는지도 확인해야 합니다.

font-display: swap은 항상 써도 되나요?

대부분의 본문 폰트에는 안전합니다. 브랜드 로고처럼 폰트 교체가 눈에 띄는 영역은 preload와 fallback 폭을 같이 조정하는 편이 좋습니다.

웹폰트가 느릴 때 - 웹퍼블리셔 문제 해결 가이드 | 복붙랩