웹폰트 최적화, LCP 지키면서 브랜드 폰트 쓰는 법

결론부터 말하면 이렇다. 웹폰트 자체가 느린 게 아니라 불러오는 방식이 문제다. 브랜드 아이덴티티를 살리는 커스텀 폰트를 쓰면서도 LCP는 충분히 지킬 수 있다. 폰트를 포기할 필요 없이 font-display, preload, 서브셋팅 세 가지만 제대로 설정하면 된다.

문제는 대부분의 홈페이지가 폰트 파일을 기본 설정 그대로, 즉 아무 최적화 없이 그대로 걸어 둔다는 점이다. 브랜드 폰트를 쓰는 순간 속도가 느려진다는 통념은 절반만 맞다 — 정확히는 설정을 안 해서 느려지는 것이다.

웹폰트가 왜 LCP를 늦출까?

가장 큰 원인은 폰트 파일이 다 받아지기 전까지 브라우저가 텍스트 렌더링 자체를 미루는 현상, 이른바 FOIT(보이지 않는 텍스트 깜빡임)다. 첫 화면에서 가장 큰 콘텐츠(LCP 요소)가 커스텀 폰트를 쓴 제목이나 문단이라면, 폰트 로딩이 끝날 때까지 LCP 측정 자체가 미뤄진다.

여기에 CSS가 로드된 뒤에야 @font-face의 폰트 파일 요청이 시작되는 순서 문제도 겹친다. 스타일시트 해석 → 폰트 요청 → 다운로드까지 왕복이 한 번 더 늘어나는 구조라, 폰트 파일이 크고 서버 응답이 느릴수록 그 지연이 고스란히 LCP에 더해진다.

이미지나 서버 응답 속도만 점검하고 폰트는 손대지 않는 경우가 많다. 그런데 실제 LCP 지연 원인을 뜯어보면 텍스트 기반 히어로 영역에서는 폰트 로딩이 원인인 사례가 적지 않다.

font-display 값은 뭘 써야 할까?

대부분의 사이트에는 font-display: swap이 무난한 선택이다. 시스템 폰트로 텍스트를 즉시 보여준 뒤 브랜드 폰트가 준비되는 대로 교체하는 방식이라, 텍스트가 안 보이는 시간이 0에 가깝다.

값	텍스트 숨김 시간	교체 허용 시간	특징
swap	0ms	무제한	즉시 표시 후 교체, 화면이 살짝 움직일 수 있음
optional	약 100ms	없음	느린 네트워크면 브랜드 폰트를 포기, 속도 최우선
fallback	약 100ms	약 3초	절충안, 짧게 기다리고 정해진 시간 안에만 교체
block	약 2–3초	무제한	브랜드 폰트 노출 우선, 그만큼 텍스트가 늦게 보임

나쁜 예는 font-display를 아예 지정하지 않는 경우다.

@font-face {
  font-family: "BrandFont";
  src: url("/fonts/brand-regular.woff2") format("woff2");
}

브라우저 기본값에 맡기면 상당수 브라우저가 block과 비슷하게 동작해 텍스트를 오래 숨긴다. 좋은 예는 값을 명시하는 것이다.

@font-face {
  font-family: "BrandFont";
  src: url("/fonts/brand-regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 700;
}

로고 옆 워드마크처럼 브랜드 폰트 노출 자체가 중요한 요소라면 fallback이나 block도 선택지가 될 수 있지만, 본문 텍스트에는 swap 또는 optional을 권한다.

preload는 꼭 써야 할까?

첫 화면에 바로 보이는 핵심 폰트 파일 한두 개만 골라 preload하는 것이 정답이다. 모든 굵기와 스타일을 다 preload하면 오히려 초기 대역폭을 나눠 먹어 정작 중요한 폰트나 이미지 로딩이 늦어진다.

<link rel="preload" href="/fonts/brand-regular.woff2" as="font" type="font/woff2" crossorigin>

crossorigin 속성을 빠뜨리면 폰트 요청이 다시 시작돼 preload 효과가 사라진다는 점도 자주 놓치는 부분이다. 볼드나 이탤릭처럼 첫 화면에 안 쓰이는 굵기는 preload 대상에서 빼는 편이 낫다.

한글 브랜드 폰트, 서브셋팅이 필수일까?

결론적으로는 그렇다. 완성형 한글은 11,172자에 달해 라틴 문자 위주인 영문 폰트보다 파일이 훨씬 크다. 실제 페이지에서 쓰이지도 않는 글자까지 통째로 내려받게 되는 셈이라, 서브셋팅으로 실제 쓰는 글자만 남기는 작업이 사실상 필수다.

이 글의 카드뉴스 이미지에도 쓰인 프리텐다드처럼, 국내에서 널리 쓰이는 한글 웹폰트 상당수는 CDN에서 굵기별로 나뉜 WOFF2 파일을 이미 제공한다. 사이트에서 실제로 쓰는 굵기(보통 본문용 400, 강조용 700 두 가지 정도)만 골라 쓰는 것만으로도 용량을 크게 줄일 수 있고, 별도 서브셋 도구로 자주 안 쓰는 특수 글자까지 걸러내면 한 번 더 줄어든다.

폰트 파일 확장자도 확인할 부분이다. WOFF2는 이전 포맷보다 압축률이 높아, 같은 글자를 담아도 파일이 더 작다. 아직 TTF·OTF를 그대로 쓰고 있다면 WOFF2로 바꾸는 것만으로도 눈에 띄는 개선이 있다.

브랜드 폰트와 로딩 속도는 양자택일이 아니다. font-display로 텍스트가 안 보이는 시간을 없애고, preload로 핵심 폰트만 앞당기고, 서브셋팅과 WOFF2로 파일 자체를 줄이면 브랜드도 지키고 코어 웹 바이탈도 지킬 수 있다. 속도 점검 전반은 웹사이트 속도 최적화 체크리스트에서, 새로 홈페이지를 만드는 단계라면 홈페이지 제작 프로세스 10단계에서 폰트를 포함한 전체 흐름을 확인할 수 있다.

폰트 설정이나 사이트 속도 점검이 막막하시다면 이루웹이 홈페이지 제작 상담을 통해 함께 진단해 드리겠습니다. 이루웹의 다른 서비스도 살펴보시고, 궁금하신 점은 언제든 문의 남겨 주시기 바랍니다.