2026-07-13 · 웹 성능
웹폰트는 늦게 로드되면 글자가 뒤늦게 바뀌며(FOUT) 레이아웃이 흔들립니다. preload로 핵심 폰트를 미리 불러오면 텍스트 표시를 앞당기고 이동을 줄일 수 있습니다.
문서 <head> 상단에 아래처럼 선언합니다. 브라우저가 폰트를 우선순위 높게 미리 받아 둡니다.
<link rel="preload" href="/fonts/pretendard.woff2" as="font" type="font/woff2" crossorigin>
crossorigin 속성은 폰트 요청에 필수입니다. 빠뜨리면 preload가 재사용되지 않고 폰트를 두 번 받게 됩니다.
모든 폰트를 preload하면 오히려 초기 대역폭을 잡아먹습니다. 첫 화면에 실제로 쓰이는 서브셋 한두 개만 골라야 효과가 큽니다. 굵기별로 파일이 나뉜다면 본문에 쓰는 Regular와 제목용 Bold 정도로 제한하는 것이 좋습니다.
preload는 @font-face의 font-display 설정과 함께 동작합니다. swap은 폰트가 늦어도 기본 폰트로 먼저 보여 주고, optional은 조금이라도 늦으면 웹폰트를 포기해 레이아웃 이동을 원천 차단합니다. CLS가 중요하면 optional을, 브랜드 폰트 노출이 중요하면 swap을 택하세요.
핵심 폰트만 골라 crossorigin과 함께 preload하고, font-display를 목적에 맞게 설정하면 텍스트가 빠르고 안정적으로 표시됩니다. 작은 설정 하나가 체감 속도를 크게 바꿉니다.