한글 웹폰트 용량은 영문 폰트와 비교가 안 될 만큼 큽니다. 굵기 두세 개만 받아도 메인 이미지보다 무거워지는 경우가 흔합니다.
실제로 쓰는 글자만 남기는 서브셋과 woff2 변환만 해도 체감 속도가 달라지는데, 저희가 리뉴얼 때 쓰는 순서를 그대로 정리했습니다.

1. 쓸 글자만 남기는 서브셋 만들기

무료로 쓸 수 있는 도구는 파이썬 패키지 fonttools의 pyftsubset입니다. 남길 글자를 텍스트 파일(예: 영문·숫자·기호에 완성형 2,350자)로 준비하고 아래처럼 실행하면 됩니다. woff2로 바로 뽑으려면 brotli도 같이 설치해야 합니다.

# 설치 (woff2 출력에 brotli 필요)
pip install fonttools brotli

# 남길 글자 목록으로 서브셋 + woff2 변환
pyftsubset NotoSansKR-Regular.otf \
  --text-file=chars.txt \
  --layout-features='*' \
  --flavor=woff2 \
  --output-file=notosanskr-400.woff2

2. @font-face는 woff2 하나로 단순하게

요즘 쓰이는 브라우저는 모두 woff2를 지원하니 ttf, eot까지 줄줄이 적을 필요가 없습니다. 굵기도 실제 디자인에 쓰는 것만 남기세요. 시안에 300·400·500·700이 다 있어도 확인해 보면 두세 개로 줄일 수 있는 경우가 대부분이었습니다.

@font-face {
  font-family: 'NotoKR';
  src: url('/fonts/notosanskr-400.woff2')
       format('woff2');
  font-weight: 400;
  font-display: swap;
}

/* 서브셋에 없는 글자는 시스템 폰트로 */
body {
  font-family: 'NotoKR', sans-serif;
}

3. 빠진 글자가 생기는 곳은 미리 확인하기

2,350자 서브셋은 '똠', '햏' 같은 일부 글자가 빠집니다. 운영자가 쓰는 본문이라면 거의 문제가 없지만, 게시판 글이나 회원 이름처럼 방문자가 입력하는 내용에는 가끔 섞여 나옵니다. 빠진 글자는 깨지지 않고 시스템 폰트로 대신 그려지지만 글씨체가 한 글자만 달라 보입니다.

게시판처럼 글자를 예측할 수 없는 곳은 글자 범위를 여러 파일로 나누고 unicode-range를 지정하는 방법이 있습니다. 브라우저가 화면에 나온 글자가 속한 파일만 받아 가기 때문에 전체 글자를 지원하면서도 처음 받는 양은 작게 유지됩니다. 상용 폰트라면 변환과 서브셋이 라이선스에서 허용되는지 먼저 확인해 두세요.