CSS_Subset Font

📢 Subset Font란?

Subset Font(서브셋 폰트)는 폰트 파일에서 필요한 문자만 추출하여 만든 폰트 파일을 의미.

즉, 모든 글자를 포함한 일반 폰트 대신, 자주 사용하는 문자나 특정 언어만 포함한 경량화된 폰트.

---

📍 왜 Subset Font를 사용할까?

1. 파일 크기 감소 → 로딩 속도 향상

   • 전체 폰트보다 훨씬 작은 용량
   • 페이지 로딩 속도 개선 및 성능 최적화

2. 네트워크 비용 절감

   • 폰트 다운로드에 필요한 데이터가 줄어들어 비용 절감

3. 특정 언어 최적화

   • 다국어 지원 시, 각 언어별로 별도의 서브셋 폰트를 사용 가능

---

📌 예제

• 기존 폰트: 1MB (모든 문자 포함)
• 서브셋 폰트: 100KB (영어 알파벳 + 숫자만 포함)

@font-face {
  font-family: 'CustomFont';
  src: url('customfont-subset.woff2') format('woff2');
  font-display: swap;
}

• customfont-subset.woff2는 필요한 문자만 포함된 서브셋 폰트
• 일반 폰트보다 훨씬 빠르게 로드됨

---

🔨 Subset Font 만드는 방법

1. 온라인 툴 사용:

   • Font Squirrel
   • Glyphhanger

2. 명령어로 생성 (Glyphhanger 예제):

   glyphhanger --subset ./original-font.ttf --text="Hello World!" --formats=woff2

   • Hello World!에 필요한 글자만 포함된 서브셋 폰트 생성

---

📢 정리

• Subset Font: 필요한 문자만 추출한 경량 폰트
• 장점: 빠른 로딩, 작은 파일 크기, 성능 최적화
• 활용: 다국어 웹사이트, 성능 최적화가 중요한 프로젝트

이렇게 하면 불필요한 폰트를 줄이고, 더 빠른 웹 페이지를 만들 수 있음