Pretendard 폰트 로딩이 느린 이유 (ttf → woff2 변경으로 해결)

웹 페이지에서 Pretendard 폰트를 사용하고 있는데 로딩이 유독 느리게 느껴진다면,
폰트 파일 형식과 @font-face 설정을 먼저 의심해볼 필요가 있다.

 

이 글에서는 실제로
Pretendard-Regular.ttf 를 사용하던 환경에서
woff2 포맷으로 변경하여 폰트 로딩 속도를 개선한 방법을 정리한다.

---

문제 상황: Pretendard 폰트 로딩 지연

다음과 같이 @font-face를 설정한 상태였다.

@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.ttf') format('woff');
  font-weight: 400;
  font-style: normal;
}

 

• 페이지 최초 로딩 시 텍스트가 늦게 표시됨
• Chrome DevTools → Network 탭에서 폰트 파일 로딩 시간이 길게 측정됨
• Lighthouse 성능 점수에서도 폰트 관련 지연 경고 발생

---

원인: ttf 포맷 사용과 잘못된 format 지정

문제의 원인은 크게 두 가지였다.

1️⃣ ttf(TrueType Font)의 용량 문제

• ttf 파일은 압축 효율이 낮아 파일 크기가 큼
• 웹 환경에서는 로딩에 불리함

2️⃣ format 지정 오류

format('woff')

 

 

 

• 실제 파일은 .ttf인데 format은 woff로 지정
• 브라우저가 폰트를 최적의 방식으로 처리하지 못할 수 있음

---

해결 방법: woff2 포맷으로 변경

웹폰트 성능 최적화를 위해
폰트 파일을 woff2 포맷으로 변경하고 @font-face 설정을 수정했다.

@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

 

 

변경 포인트 정리

• .ttf → .woff2 파일 사용
• format('woff2')로 정확히 지정

---

결과: 폰트 로딩 속도 개선

변경 후 확인한 결과는 다음과 같다.

• 폰트 파일 용량 감소
• Network 탭에서 폰트 로딩 시간 단축
• 텍스트가 먼저 표시되고 폰트가 자연스럽게 교체됨
• Lighthouse 성능 점수 개선

특히 초기 렌더링 체감 속도가 눈에 띄게 좋아졌다.

---

추가 팁: Pretendard 웹폰트 최적화 시 함께 고려할 사항

• 가능한 경우 woff2 → woff → ttf 순으로 fallback 구성
• 필요한 weight만 로드 (불필요한 굵기 제거)
• CDN 캐싱 활용

@font-face {
  font-family: 'Pretendard';
  src:
    url('../fonts/Pretendard-Regular.woff2') format('woff2'),
    url('../fonts/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

---

정리

• Pretendard 폰트 로딩이 느리다면
  ttf 사용 여부를 가장 먼저 확인
• 웹 환경에서는 woff2 포맷이 기본 선택
• format 지정은 파일 확장자와 정확히 맞출 것
• font-display: swap으로 UX까지 함께 개선

웹폰트 로딩 문제는 작은 설정 하나로도
전체 페이지 체감 성능에 큰 영향을 줄 수 있다.