Frontend2025년 8월 12일1분 읽기

웹 폰트 최적화 — FOUT, FOIT 방지와 성능 개선

YS
YoungSam
조회 199

폰트 로딩 전략

/* font-display 속성 */
@font-face {
  font-family: "Pretendard";
  src: url("/fonts/Pretendard.woff2") format("woff2");
  font-display: swap;  /* FOUT: 시스템 폰트 먼저 표시 */
}

/* preload로 빠르게 로드 */
<link rel="preload" href="/fonts/Pretendard.woff2"
  as="font" type="font/woff2" crossorigin>

서브셋 최적화

# 한글 서브셋 (2,350자 → 약 300KB 절약)
pyftsubset Pretendard.ttf \
  --text-file=korean-chars.txt \
  --output-file=Pretendard-subset.woff2 \
  --flavor=woff2
Web FontPerformanceCSS

댓글 0

아직 댓글이 없습니다.