웹폰트는 웹사이트의 디자인과 브랜드 아이덴티티를 강화하는 중요한 요소입니다. 하지만 최적화되지 않은 웹폰트는 로딩 속도를 저하시킬 수 있습니다. 본 가이드에서는 웹폰트 형식, Google Fonts 활용법, 폰트 로딩 최적화 방법을 다룹니다.
1. 웹폰트 형식 이해하기: WOFF vs WOFF2
웹에서 사용되는 대표적인 폰트 형식은 다음과 같습니다.
WOFF (Web Open Font Format)
- 웹에서 널리 사용되는 폰트 형식으로, 압축이 적용되어 있어 비교적 용량이 작음
- 대부분의 최신 브라우저에서 지원하지만, 더 나은 압축률을 가진 WOFF2가 등장
WOFF2
- WOFF보다 약 30% 더 높은 압축률을 제공하여 로딩 속도를 개선
- 최신 브라우저에서만 지원되므로, WOFF와 함께 제공하는 것이 안전한 선택
기타 폰트 형식 (TTF, OTF, SVG, EOT)
- TTF/OTF: 기본적인 폰트 형식이지만, 웹 최적화가 부족하여 직접 사용은 비추천
- SVG: 벡터 형식으로 일부 아이콘 폰트에서 사용되지만, 최신 브라우저에서 지원이 중단됨
- EOT: 과거 Internet Explorer에서 사용되었으나, 현재는 거의 사용되지 않음
최적의 선택: WOFF2를 기본으로 사용하고, 호환성을 위해 WOFF를 함께 제공
2. Google Fonts 활용법
Google Fonts는 웹폰트를 무료로 제공하며, 최적화된 폰트 로딩 방식을 지원합니다.
Google Fonts 사용 방법
HTML에서 직접 링크 사용:
<link rel="preconnect" href="<https://fonts.googleapis.com>"> <link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin> <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
CSS에서 @import 사용:
@import url('<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>');
Google Fonts API의 주요 옵션:
- display=swap: 페이지 로딩 시 기본 폰트로 먼저 표시하고, 이후 웹 폰트로 변경하여 FOIT (Flash of Invisible Text) 현상 방지
- family=Roboto:wght@400;700: 원하는 폰트의 굵기를 지정하여 불필요한 폰트 로딩 방지
3. 웹폰트 로딩 최적화 방법
1) 폰트 서브셋 만들기
모든 글자를 포함한 폰트 파일은 용량이 크기 때문에, 필요한 문자만 포함한 서브셋(Subsetting) 폰트를 사용하면 성능이 향상됩니다.
- Subset Generator(https://www.fontsquirrel.com/tools/webfont-generator)와 같은 도구를 활용하여 서브셋 폰트 제작
- 한글 웹사이트라면, 자주 사용되는 글자만 포함한 폰트 파일을 생성하여 로딩 속도를 줄이기
2) preload로 폰트 로딩 우선 처리
브라우저가 폰트를 빠르게 로드할 수 있도록 <link rel="preload">를 사용합니다.
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
3) self-hosting으로 폰트 로딩 속도 향상
Google Fonts 등 외부 서비스를 이용하는 대신, 직접 서버에 폰트를 호스팅하여 네트워크 요청을 줄이고 성능을 향상시킬 수 있습니다.
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
4) 시스템 폰트와 혼합 사용
웹폰트가 로딩되기 전까지 기본 시스템 폰트를 먼저 사용하면 UX가 개선됩니다.
body {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
웹 폰트는 디자인의 중요한 요소이지만, 최적화되지 않으면 성능 저하를 초래할 수 있습니다. WOFF2를 기본으로 사용하고, Google Fonts의 최적화 기능을 적극 활용하며, 필요 없는 글자는 서브셋 처리하는 것이 핵심입니다. 또한, preload를 활용해 중요한 폰트를 우선 로딩하고, 시스템 폰트를 적절히 조합하면 더욱 빠른 사용자 경험을 제공할 수 있습니다.
이제 웹사이트에서 디자인과 성능을 모두 잡는 웹폰트 최적화를 실현해보세요!
