웹폰트 적용하는 방법 완벽 가이드 - 구글폰트부터 웹폰트 직접 호스팅까지
웹사이트나 방송 오버레이에 원하는 폰트를 적용하고 싶으신가요. 구글폰트 연결부터 로컬 호스팅, 성능 최적화까지 실전 방법을 정리했습니다
방송 오버레이를 만들거나 개인 블로그를 꾸밀 때 기본 폰트만 쓰면 어딘가 허전합니다. 네이버 기본 서체, 맑은 고딕 같은 시스템 폰트만으로는 브랜드 개성을 살리기 어렵죠. 그렇다고 포토샵으로 이미지 박아 넣자니 검색엔진이 읽지 못하고 수정할 때마다 번거롭습니다. 웹폰트를 제대로 적용하면 디자인 자유도와 검색 노출 두 마리 토끼를 모두 잡을 수 있습니다.
웹폰트가 필요한 이유
웹폰트는 사용자 컴퓨터에 설치된 폰트가 아니라 서버에서 폰트 파일을 내려받아 표시하는 기술입니다. 방문자가 어떤 기기를 쓰든 디자이너가 의도한 서체 그대로 보여줍니다. 윈도우에서는 맑은 고딕, 맥에서는 애플 산돌고딕, 아이폰에서는 또 다른 폰트로 제각각 보이는 문제를 해결합니다.
특히 한글 폰트는 영문보다 파일 용량이 훨씬 큽니다. 영문 폰트가 50KB 수준이라면 한글 폰트는 완성형 기준 2MB에서 5MB 사이입니다. 글자 수가 많다 보니 파일이 무거워지고, 이로 인한 로딩 지연은 사용자 이탈로 이어집니다. 그래서 웹폰트는 단순히 연결만 하는 것이 아니라 최적화 전략이 중요합니다.
웹폰트는 디자인 도구이자 성능 문제입니다. 적용 방법을 안다고 해서 끝이 아니라, 사용자가 첫 화면을 볼 때까지의 시간을 얼마나 단축하느냐가 진짜 실력입니다.
구글폰트로 가장 빠르게 적용하기
가장 간편한 방법은 구글폰트를 사용하는 것입니다. fonts.google.com에 접속해서 원하는 폰트를 고르고, 제공되는 코드 한 줄만 복사하면 끝납니다.
HTML link 태그 방식
HTML의 head 영역에 아래처럼 link 태그를 추가합니다.
<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=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">이후 CSS에서 font-family를 지정합니다.
body { font-family: 'Noto Sans KR', sans-serif; }CSS @import 방식
CSS 파일 최상단에 @import 구문으로 가져올 수도 있습니다. 다만 HTML link 방식이 로딩 속도 면에서 더 유리합니다. @import는 CSS 파싱을 멈추고 폰트를 가져오기 때문입니다.
웹폰트 직접 호스팅하는 방법
외부 CDN을 거치지 않고 자체 서버에 폰트 파일을 올려서 제공하는 방식입니다. 속도 제어와 개인정보 보호 측면에서 유리합니다.
폰트 파일 준비
눈누(noonnu.cc), 산돌구름 무료 폰트, 네이버 나눔폰트 공식 사이트 등에서 상업용 허용 폰트를 내려받습니다. 라이선스를 반드시 확인하세요. 방송 오버레이나 상업 블로그에 사용하려면 상업적 이용 허가가 있어야 합니다.
@font-face 작성
CSS에 아래처럼 선언합니다.
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2'),
url('/fonts/MyFont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}폰트 파일 경로가 HTML 문서 기준이 아닌 CSS 파일 기준이라는 점에 주의합니다. CSS가 /css/style.css에 있고 폰트가 /fonts/에 있다면 ../fonts/MyFont.woff2 로 써야 할 수도 있습니다.
폰트 파일 형식과 브라우저 호환성
웹폰트 파일은 여러 형식이 있고 각각 장단점이 다릅니다. 아래 표로 정리했습니다.
| 형식 | 확장자 | 용량 | 브라우저 지원 | 추천도 |
|---|---|---|---|---|
| WOFF2 | .woff2 | 가장 작음 | 모던 브라우저 전부 | 최우선 |
| WOFF | .woff | 작음 | IE9 이상 | 보조용 |
| TTF | .ttf | 큼 | 대부분 지원 | 구형 기기용 |
| EOT | .eot | 보통 | IE 전용 | 사용 안 함 |
| OTF | .otf | 큼 | 부분 지원 | 비추천 |
2026년 기준으로는 WOFF2 하나만 제공해도 충분합니다. WOFF2는 Brotli 압축을 기본 적용해서 TTF 대비 약 30% 더 작습니다. 구형 브라우저를 지원해야 한다면 WOFF를 함께 제공하세요.
웹폰트 로딩 속도 최적화 기법
한글 웹폰트는 무겁습니다. 최적화 없이 적용하면 첫 화면이 나타나는 데 2초에서 4초가 더 걸릴 수 있습니다. 아래 기법들을 적용하세요.
font-display 속성 활용
- swap: 시스템 폰트로 먼저 보여주고 웹폰트 로딩이 끝나면 교체. 가장 무난
- optional: 100ms 안에 로딩 안 되면 시스템 폰트 유지. 모바일에 유리
- fallback: swap과 optional의 중간 동작
서브셋 폰트 사용
한글은 자주 쓰는 2,350자만 포함한 KS 완성형 서브셋을 쓰면 용량을 5분의 1까지 줄일 수 있습니다. 특수 한자나 고어가 필요 없는 일반 블로그라면 서브셋이 정답입니다.
preload로 우선순위 올리기
<link rel="preload" href="/fonts/MyFont.woff2" as="font" type="font/woff2" crossorigin>브라우저가 폰트 파일을 가장 먼저 내려받도록 알려주는 방식입니다. 핵심 폰트 1~2개에만 적용해야 효과가 있습니다.
유니코드 레인지 분할
CSS에서 unicode-range를 지정하면 해당 문자가 화면에 실제로 나타날 때만 폰트 파일을 받습니다. 구글폰트가 이 방식을 기본 적용하고 있어서 첫 로딩이 매우 빠릅니다.
자주 발생하는 문제와 해결
웹폰트 적용 후 마주치는 대표 문제들입니다.
폰트가 적용이 안 됨
- font-family 이름에 오타가 없는지 확인. 대소문자 구분
- CSS 우선순위 문제. 부모 요소나 개별 요소에 !important로 덮어쓴 스타일이 있는지 검사
- 개발자 도구 Network 탭에서 폰트 파일이 실제로 받아졌는지 확인. 404 오류가 자주 원인
CORS 오류 발생
다른 도메인에 폰트를 두면 CORS 헤더 설정이 필요합니다. Nginx 기준으로 Access-Control-Allow-Origin 헤더를 추가하세요.
폰트 깜빡임(FOUT, FOIT)
페이지 로드 시 글자가 잠깐 다른 폰트로 보였다가 바뀌는 현상입니다. font-display: swap과 preload를 함께 쓰면 대부분 해결됩니다. 완벽히 막으려면 size-adjust 속성으로 시스템 폰트와 웹폰트의 크기 차이까지 맞춰야 합니다.
방송 오버레이에서 폰트 안 나옴
OBS Studio의 브라우저 소스는 내장 Chromium을 사용하기 때문에 일반 웹과 대부분 동일하게 작동하지만, 로컬 HTML 파일을 불러올 때 CORS 제한으로 구글폰트가 막히는 경우가 있습니다. 이때는 폰트를 같은 폴더에 두고 @font-face로 로컬 호스팅하세요.
기술 정보나 개인 프로젝트 결과물을 블로그에 정리해두면 수익도 따라옵니다. 광고 수익이나 강의 의뢰로 발생하는 금액이 궁금하다면 연봉 실수령액 계산기로 세후 실수령액을 가늠해볼 수 있습니다.
지금 당장 할 일은 두 가지입니다. 첫째, 본인 사이트에 적용된 폰트가 WOFF2 형식인지 확인하고 아니라면 변환하세요. 둘째, font-display: swap과 preload를 추가해서 첫 화면 로딩 체감 속도를 줄이세요. 이 두 가지만 적용해도 사용자 이탈률이 눈에 띄게 개선됩니다.
