웹폰트 적용, 한글 용량 줄이는 법과 확장자 표
웹폰트를 홈페이지에 넣는 세 가지 방식과 한글 폰트 용량을 줄이는 순서입니다. 같은 폰트의 TTF · OTF · WOFF · WOFF2 · 서브셋 실측 용량표, @font-face와 font-display 예시, 무료 폰트의 웹 사용 범위, 적용 확인 방법을 담았습니다.
웹폰트는 방문자 기기에 없는 글꼴을 서버에서 내려받아 홈페이지 글자를 그 글꼴로 보여 주는 방식입니다. 넣는 방법은 무료 폰트 서비스 연결 · 파일 직접 올리기 · 빌더 글꼴 메뉴 세 가지이고, 한글 폰트는 글자 수가 많아 파일이 크므로 WOFF2 형식 · 굵기 두 개 · 서브셋으로 줄입니다. 무료 한글 폰트 하나의 Regular 굵기 파일을 배포 목록에서 확인하면 TTF 약 2.6MB, WOFF2 약 748KB, 배포처가 만든 서브셋 WOFF2 약 261KB입니다.
웹폰트 — 어떻게 적용하나요
세 방식은 손이 가는 정도와 용량을 누가 관리하느냐가 다릅니다.
| 방식 | 하는 일 | 용량 관리 | 라이선스 확인 | 이럴 때 |
|---|---|---|---|---|
| 무료 폰트 서비스 연결 | CSS 링크 한 줄을 페이지 머리에 붙임 | 서비스가 글자 조각으로 나눠 둠 | 서비스에 올라온 폰트의 라이선스(대개 OFL) | 서비스에 원하는 한글 폰트가 있을 때 |
| 파일 직접 올리기 | WOFF2 파일을 서버에 두고 @font-face로 연결 | 형식 · 굵기 · 서브셋을 직접 정함 | 웹 임베딩 · 서버 설치가 허용되는지 | 브랜드 전용 폰트, 외부 서버에 기대지 않을 때 |
| 빌더 글꼴 메뉴 | 빌더가 주는 글꼴을 고르거나 파일을 업로드 | 빌더가 변환 · 배포 | 업로드한 폰트는 올린 쪽이 확인 | 빌더로 만든 홈페이지 |
무료 폰트 서비스는 한글을 잘게 나눠 둡니다. 2026년 10월 15일 구글 폰트에서 Noto Sans KR의 CSS를 받아 보니 굵기 하나가 124개 조각으로 나뉘어 있었고, 브라우저는 화면에 쓰인 글자가 든 조각만 받습니다. 한 무료 한글 폰트 배포처도 같은 방식의 다이나믹 서브셋 CSS를 함께 배포합니다.
빌더에 업로드할 때는 그 빌더 도움말의 형식과 용량 안내를 먼저 봅니다. 한 해외 빌더는 TTF · OTF · WOFF2 · WOFF 업로드를 받고 WOFF2를 권하며, 4MB가 넘는 폰트는 사이트 속도에 영향을 줄 수 있다고 안내합니다. 업로드한 폰트를 쓸 권리가 있는지는 올리는 쪽이 확인해야 한다는 문장도 함께 있습니다.
웹폰트 확장자는 무엇을 쓰나요
웹에는 WOFF2를 씁니다. 아래 용량은 OFL로 배포되는 무료 한글 폰트 Pretendard(1.3.9판)의 Regular 굵기 파일을 2026년 10월 15일 배포 목록에서 확인한 값이며, 1KB는 1,024바이트로 환산했습니다.
| 확장자 | 무엇인가 | 웹에서 | Regular 한 굵기 용량 |
|---|---|---|---|
| WOFF2 | 웹 전용 압축 형식(W3C 권고안, Brotli 압축) | 기본으로 씀 | 약 748KB |
| WOFF2 서브셋 | 배포처가 글자 수를 줄여 만든 WOFF2 | 한글 사이트에서 먼저 고려 | 약 261KB |
| WOFF2 다이나믹 서브셋 | 글자를 92개 조각으로 나눈 WOFF2 | 화면에 쓰인 조각만 받음 | 조각 하나 약 3.9~19.3KB |
| WOFF | 이전 웹 형식(Flate 압축) | 오래된 브라우저 대비용으로만 | 약 1.06MB |
| OTF | 설치용 글꼴(디자인 프로그램) | 웹에 그대로 쓰지 않음 | 약 1.50MB |
| TTF | 설치용 글꼴 | 웹에 그대로 쓰지 않음 | 약 2.60MB |
같은 굵기인데 TTF와 서브셋 WOFF2는 약 10배 차이가 납니다(약 2.60MB → 약 261KB, 약 9.8%). 디자인 프로그램에 설치하는 파일과 웹에 올리는 파일을 따로 관리해야 하는 이유입니다.
@font-face는 어떻게 적나요
파일을 직접 올릴 때는 굵기마다 @font-face를 하나씩 적고, 같은 font-family 이름으로 묶습니다. 아래는 본문 400 · 제목 700 두 굵기만 연결한 예시입니다. 폰트 이름과 파일 경로는 예시로 가정한 값입니다.
@font-face {
font-family: "BrandSans";
src: url("/fonts/brandsans-400.subset.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "BrandSans";
src: url("/fonts/brandsans-700.subset.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
body {
font-family: "BrandSans", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}font-display는 폰트 파일이 도착하기 전 글자를 어떻게 보여 줄지 정하는 값입니다.
| 값 | 도착 전 | 늦게 도착하면 | 쓰는 자리 |
|---|---|---|---|
| swap | 대체 글꼴로 바로 보여 줌 | 도착하는 대로 바꿔 끼움 | 본문 · 제목 대부분 |
| fallback | 대체 글꼴로 바로 보여 줌 | 짧은 시간 안에 오면 바꾸고, 그 뒤엔 대체 글꼴 유지 | 글꼴이 바뀌며 화면이 흔들리는 것을 줄이고 싶을 때 |
| optional | 대체 글꼴로 바로 보여 줌 | 바꾸지 않음 | 글꼴보다 속도가 중요한 페이지 |
| block | 잠깐 글자를 숨김 | 도착하는 대로 바꿔 끼움 | 아이콘 폰트처럼 대체 글꼴이 의미 없을 때 |
대체 글꼴 목록은 font-family 뒤쪽에 둡니다. 예시처럼 맥 · 아이폰의 Apple SD Gothic Neo, 윈도우의 Malgun Gothic을 적어 두면 웹폰트가 늦거나 빠진 글자가 있어도 한글이 깨지지 않습니다.
한글 웹폰트가 느릴 때는 무엇을 줄이나요
- 형식 — WOFF2만 연결합니다. TTF · OTF를 웹에 그대로 올렸다면 이것부터 바꿉니다.
- 굵기 — 본문 하나 · 제목 하나, 두 개로 줄입니다. 화면에 쓰는 굵기가 늘면 그 수만큼 파일을 받습니다. 위 폰트는 굵기가 9가지이지만 디자인을 두 굵기로 맞추면 받는 파일도 두 개입니다.
- 서브셋 — 한글 완성형은 유니코드에 11,172자가 있고, 글자를 줄이는 기준으로 KS X 1001 완성형 2,350자를 쓰기도 합니다. 다만 직접 대조해 보면 똠 · 햏 · 뷁 같은 글자는 2,350자에 없어서, 상품명 · 이름에 이런 글자가 있으면 그 글자만 대체 글꼴로 보입니다. 서브셋을 만들 때는 사이트에 쓰인 고유 이름을 따로 모아 추가합니다.
- 조각 나누기 — 서비스 연결이나 배포처의 다이나믹 서브셋 CSS를 쓰면 화면에 쓰인 글자 조각만 받습니다.
- 표시 방식 — font-display: swap으로 글자가 먼저 보이게 합니다.
이미지 · 스크립트까지 함께 느린지 넓게 확인하려면 홈페이지가 느릴 때 확인하는 순서를 따라갑니다.
무료 폰트도 웹에 써도 되나요
폰트마다 다릅니다. OFL(SIL 오픈 폰트 라이선스)은 공식 FAQ에서 @font-face로 웹폰트를 쓰는 것을 허용한다고 밝히고 있습니다. 위에서 잰 폰트도 OFL이며, 배포처 안내에 글꼴 단독 판매를 빼면 상업적 이용 · 수정 · 재배포가 가능하다고 적혀 있습니다.
확인할 것이 두 가지 더 있습니다. 첫째, 인쇄 · 영상에는 무료라도 웹 임베딩은 따로 적은 폰트가 있어 배포처 원문에서 웹 항목을 찾아봅니다. 둘째, OFL FAQ는 웹용으로 글자를 잘라 낸 파일을 수정본으로 보고, 예약 글꼴 이름(Reserved Font Name)이 있는 폰트라면 잘라 낸 파일에 다른 이름을 붙이도록 안내합니다. 배포처가 만든 서브셋 파일을 쓰면 이 문제를 피할 수 있습니다. 어느 화면을 열어 범위를 확인하는지는 폰트 사용 범위, 어디를 열어 확인하나에 정리돼 있습니다.
웹폰트가 적용됐는지는 어떻게 확인하나요
- 크롬에서 페이지를 열고 개발자 도구의 Network 패널을 엽니다.
- Disable cache를 켜고 새로 고침합니다. 처음 방문한 사람과 같은 상태가 됩니다.
- 종류 필터에서 Font를 눌러 받은 폰트 파일의 이름 · 개수 · 용량을 봅니다. 굵기 두 개만 연결했다면 파일도 두 개(조각 방식이면 조각 몇 개)여야 합니다.
- Throttling에서 느린 회선(Slow 4G 등)을 골라 다시 열고, 글자가 대체 글꼴로 먼저 보였다가 바뀌는지 봅니다.
- 상품명 · 대표 이름처럼 드문 글자가 든 문장이 다른 글꼴로 보이지 않는지 눈으로 확인합니다.
자주 묻는 질문
웹폰트와 시스템 폰트는 무엇이 다른가요?
시스템 폰트는 방문자 기기에 이미 깔린 글꼴입니다. 윈도우의 맑은 고딕, 맥 · 아이폰의 Apple SD 산돌고딕 Neo 같은 것이라 내려받을 것이 없어 빠르지만, 기기마다 다른 글꼴로 보입니다. 웹폰트는 파일을 받아 오는 시간이 드는 대신 어느 기기에서나 같은 글꼴로 보입니다. 그래서 웹폰트를 쓰더라도 font-family 뒤쪽에 시스템 폰트를 대체 글꼴로 적어 둡니다.
무료 폰트 서비스 연결과 파일 직접 올리기 중 무엇을 고르나요?
쓰려는 한글 폰트가 무료 폰트 서비스에 있으면 서비스 연결부터 씁니다. 이미 글자 조각으로 나눠 두어 용량 작업을 따로 하지 않아도 됩니다. 서비스에 없는 브랜드 전용 폰트이거나 외부 서버에 기대지 않아야 하는 사이트라면 WOFF2 파일을 직접 올리고 서브셋으로 줄입니다.
TTF 파일을 WOFF2로 바꾸려면 어떻게 하나요?
폰트 도구 모음인 fonttools의 subset 명령에 --flavor=woff2 옵션을 주면 형식을 바꾸면서 글자를 고를 수 있습니다(WOFF2 출력에는 Brotli 확장이 필요합니다). 다만 형식 변환과 서브셋은 라이선스에 따라 수정으로 볼 수 있어, 먼저 배포처가 WOFF2나 서브셋 파일을 함께 주는지 확인하고 있으면 그 파일을 씁니다.
굵기는 몇 개까지 넣나요?
본문용 하나와 제목용 하나, 두 개로 시작합니다. 굵기마다 파일이 따로 있어서 화면에 쓰는 굵기가 늘면 받는 파일도 늘어납니다. 디자인 시안에서 실제로 쓴 굵기를 세어 보고 그 굵기만 @font-face로 적습니다.
오늘 할 일
크롬 개발자 도구 Network 패널에서 Font 필터를 켜고 홈페이지 첫 화면을 새로 고침해, 받는 웹폰트 파일의 개수와 합계 용량을 적으십시오. TTF · OTF가 보이거나 굵기가 세 개를 넘으면 그 줄부터 WOFF2 두 굵기로 바꿉니다.
이어서 읽기 — 상업용 무료 폰트, 배포처별 사용 범위 비교표 · 자막 폰트, 상업용 무료 8종과 크기·두께 기준 · 메타태그 설정, 넣을 5가지와 제목·설명 길이
