웹사이트에서 TTF 폰트를 제공할 때, 필요 이상으로 약 30% 더 많은 데이터를 전송하고 있습니다. WOFF2는 동일한 글꼴을 훨씬 작은 파일로 제공하며, 모든 최신 브라우저에서 지원합니다. 변환 방법과 사이트 성능에 미치는 영향을 알아보세요.
왜 WOFF2인가요?
WOFF2(웹 오픈 폰트 형식 2.0)은 Brotli 압축을 사용하여 TTF보다 약 30% 파일 크기를 줄이지만 품질 손실 없이 제공합니다. 폰트 글리프, 힌팅, 키어닝 및 모든 타이포그래픽 기능은 정확히 동일하게 보존됩니다. 브라우저가 WOFF2 파일을 로드할 때, 원본 TTF와 동일한 데이터로 압축을 해제합니다.
성능 영향은 실재합니다. 폰트는 렌더 차단 리소스입니다 — 브라우저는 폰트 로딩이 완료될 때까지 텍스트를 그릴 수 없습니다. 120KB TTF가 84KB WOFF2로 변환되면 특히 모바일 연결에서 텍스트가 더 빠르게 표시됩니다. Google의 Core Web Vitals은 이 부분을 직접 측정합니다: 작은 폰트는 Largest Contentful Paint (LCP)를 개선하고 폰트 교체로 인한 Cumulative Layout Shift (CLS)를 줄입니다.
브라우저 지원은 보편적입니다. Chrome, Firefox, Safari, Edge는 모두 WOFF2를 지원합니다. 지원하지 않는 브라우저는 Internet Explorer와 매우 오래된 Android 브라우저뿐이며, 이는 글로벌 트래픽의 1% 미만입니다.
변환 방법
CSS에서 WOFF2 사용
Once you have your WOFF2 file, reference it in your stylesheet. List WOFF2 first with a TTF fallback for maximum compatibility:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}font-display: swap 지시문은 브라우저에 대체 텍스트를 즉시 표시하고 사용자 정의 글꼴이 로드된 후에 교체하도록 지시하여 글꼴 로딩 중 텍스트가 보이지 않는 문제를 방지합니다.
폰트 라이선스 준수
많은 상업용 폰트 라이선스에는 제3자 웹 서비스에 폰트 파일을 업로드하는 것을 제한하는 조항이 포함되어 있습니다. 이는 문제를 일으킵니다: 성능을 위해 WOFF2로 변환해야 하지만, 대부분의 변환 도구는 폰트를 서버에 업로드해야 합니다.
물론, 항상 폰트 라이선스의 구체적인 조건을 확인하세요. 그러나 Morph의 로컬 전용 특성으로 인해 가장 일반적인 준수 문제를 해결할 수 있습니다.
기타 폰트 변환
Morph는 OTF에서 WOFF2, WOFF에서 WOFF2, TTF에서 OTF, 그리고 TTF, OTF, WOFF, WOFF2의 모든 조합을 지원합니다. 무료 폰트로 시작하고 싶으신가요? Morph 폰트 라이브러리에서 1,500개 이상의 무료 폰트를 둘러보세요.