워드프레스 웹폰트 최적화｜WOFF2·preload·CLS 점검
워드프레스에서 글자가 늦게 나타나거나 제목 줄바꿈까지 움직인다면 웹폰트 로딩 경로를 확인해야 합니다. 한글 글꼴은 파일이 커지기 쉽고, 사용하지 않는 굵기까지 내려받으면 FCP·LCP와 데이터 사용량에 영향을 줄 수 있습니다. 이 글에서는 요청 발견 시점, preload 중복, font-display와 CLS를 함께 점검합니다.
먼저 결론: 파일 수보다 사용 경로를 확인한다
- Network의 Font 항목에서 실제 내려받은 파일, 시작 시점, 크기와 상태 코드를 기록합니다.
- 본문 400, 제목 700처럼 페이지에서 실제 사용하는 굵기만 남깁니다.
- 첫 화면에 반드시 필요한 WOFF2 한두 개만 preload 후보로 검토합니다.
font-display는 글자 표시 속도와 글꼴 교체 시 레이아웃 이동을 함께 보고 선택합니다.- 캐시가 없는 첫 방문과 재방문을 분리해 같은 페이지를 비교합니다.
웹폰트가 늦게 보이는 과정을 이해하기
브라우저는 HTML에서 CSS를 발견하고 CSS 안의 @font-face와 실제 글꼴 사용 규칙을 확인한 뒤에야 필요한 폰트 파일을 요청할 수 있습니다. 폰트 정의가 여러 단계의 CSS 안에 있거나 외부 서버 연결이 늦으면 요청 시작 자체가 밀립니다. 이후 다운로드가 끝날 때까지 글자를 숨기는 FOIT 또는 대체 글꼴을 먼저 보여주는 FOUT가 발생할 수 있습니다. 따라서 총 파일 크기뿐 아니라 폰트 요청의 시작 시각과 글자가 처음 표시되는 순간을 함께 봐야 합니다.
15분 진단: 무엇을 기록해야 하나?
- 시크릿 창에서 테스트할 글 하나를 열고 개발자 도구 Network를 시작합니다.
- 캐시 사용 중지를 켠 뒤 페이지를 새로고침하고 Font 유형만 표시합니다.
- 파일명, 형식, 전송 크기, 요청 시작 시점, Duration과 응답 상태를 적습니다.
- Initiator를 열어 어떤 CSS가 해당 폰트를 요청했는지 확인합니다.
- Performance 또는 Lighthouse에서 글자 표시 시점과 레이아웃 이동 구간을 확인합니다.
- 같은 폰트 URL이 두 번 요청되거나 실제 화면에 쓰이지 않는 굵기가 있는지 찾습니다.
| 관찰 결과 | 가능한 원인 | 먼저 할 일 |
|---|---|---|
| 폰트 요청 시작이 늦음 | 외부 CSS·늦은 스타일 발견 | 요청 Initiator와 CSS 순서 확인 |
| 같은 파일이 두 번 내려받아짐 | preload URL·CORS·형식 불일치 | CSS와 preload 주소를 문자 단위로 비교 |
| 안 쓰는 굵기도 요청됨 | 테마·플러그인의 중복 글꼴 규칙 | 실제 사용 굵기만 남기기 |
| 글자가 오래 비어 있음 | font-display 미지정 또는 block | 표시 전략과 대체 글꼴 검토 |
| 교체 순간 제목이 움직임 | 대체 글꼴과 폭·행간 차이 | fallback 및 글꼴 지표 조정 |
폰트 외에도 이미지나 CSS가 LCP를 늦출 수 있습니다. 전체 병목을 먼저 구분하려면 PageSpeed 점수가 달라질 때 3회 측정하는 방법을 함께 적용하세요. Search Console의 CLS가 문제라면 실험실 한 번의 결과보다 Core Web Vitals 28일 데이터 읽는 법으로 실제 사용자 추세를 확인하는 편이 정확합니다.
WOFF2·굵기·서브셋 적용 순서
| 항목 | 안전한 기준 | 주의점 |
|---|---|---|
| 형식 | 현대 브라우저 대상 WOFF2 우선 | 원본 폰트 라이선스와 변환 허용 여부 확인 |
| 굵기 | 실제 사용하는 400·700 등만 제공 | CSS의 가짜 굵기 표현도 시각 확인 |
| 서브셋 | 콘텐츠 문자 범위를 충분히 포함 | 누락 문자는 네모나 다른 글꼴로 표시될 수 있음 |
| 호스팅 | 외부 연결 또는 로컬 관리 비용 비교 | 로컬 설치도 캐시 헤더와 업데이트 관리 필요 |
| 캐시 | 버전이 붙은 URL과 긴 브라우저 캐시 검토 | 파일 교체 후 이전 폰트가 남지 않게 버전 관리 |
워드프레스 6.5 이상에서는 글꼴 라이브러리로 설치한 글꼴이 로컬 /wp-content/uploads/fonts에 저장될 수 있습니다. 테마, 페이지 빌더와 폰트 플러그인이 각자 등록하면 중복될 수 있으므로 공개 페이지 Network에서 최종 요청을 확인하세요.
font-display는 swap만 정답이 아니다
@font-face {
font-family: "SiteText";
src: url("/wp-content/uploads/fonts/site-text.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}swap은 대체 글꼴을 바로 보여주고 웹폰트가 준비되면 교체하므로 빈 글자를 줄일 수 있습니다. 그러나 두 글꼴의 폭과 행간이 다르면 제목 줄 수나 버튼 너비가 바뀌어 CLS가 생길 수 있습니다. 브랜드 글꼴이 반드시 첫 화면에 보여야 하는지에 따라 fallback이나 optional도 시험하세요. 대체 글꼴은 최소한 serif와 sans-serif 계열을 맞추고, 필요하면 size-adjust, ascent-override, descent-override와 line-gap-override로 지표 차이를 줄일 수 있습니다.
preload는 핵심 파일만 사용한다
<link rel="preload"
href="/wp-content/uploads/fonts/site-text.woff2"
as="font"
type="font/woff2"
crossorigin>폰트는 CORS 자원으로 취급되므로 같은 서버에 있어도 preload에 crossorigin이 필요합니다. href, 프로토콜, 하위 도메인, 쿼리 문자열과 실제 @font-face URL이 다르면 미리 받은 파일을 재사용하지 못하고 다시 요청할 수 있습니다. 모든 굵기를 preload하면 CSS, 대표 이미지와 LCP 자원이 대역폭을 두고 경쟁합니다. 첫 화면에서 실제 쓰이는 파일만 한두 개 선택한 뒤 Network의 Initiator와 크기 열에서 중복 요청이 사라졌는지 확인하세요.
변경 후 통과 기준
- 캐시 없는 첫 방문에서 본문 글자가 빈 상태로 오래 남지 않습니다.
- 사용하지 않는 폰트와 굵기 요청이 사라졌습니다.
- preload한 폰트가 중복 다운로드되지 않습니다.
- 모바일에서 제목, 메뉴와 버튼 줄바꿈이 교체 전후로 크게 움직이지 않습니다.
- 한글, 숫자, 영문, 특수문자와 굵은 글씨가 빠짐없이 표시됩니다.
폰트 파일을 바꿨는데 이전 파일이 계속 보인다면 브라우저만 새로고침하지 말고 CDN, 페이지 캐시와 파일 URL 버전을 구분해야 합니다. 이 경우 워드프레스 이미지 교체 후 예전 파일이 보일 때의 캐시 구분법을 폰트 URL에도 같은 원리로 적용할 수 있습니다.
TIP
데스크톱의 빠른 인터넷에서만 확인하면 폰트 문제가 잘 보이지 않습니다. 개발자 도구에서 모바일 화면과 느린 네트워크 조건을 사용하고, 캐시를 끈 첫 방문을 녹화해 글자가 나타나는 순간과 줄바꿈 변화를 비교하세요. 이후 캐시를 켠 재방문도 별도로 확인해야 실제 사용자 경험을 판단할 수 있습니다.
자주 묻는 질문
모든 폰트를 preload하면 더 빠른가요?
아닙니다. preload는 즉시 다운로드를 시작하므로 사용하지 않는 굵기까지 지정하면 CSS와 대표 이미지 같은 중요한 자원의 우선순위를 방해할 수 있습니다.
로컬 폰트가 외부 폰트보다 항상 빠른가요?
항상 그렇지는 않습니다. 로컬은 외부 연결을 줄이고 제어하기 쉽지만 파일 크기, 캐시 헤더와 서버 속도가 나쁘면 느릴 수 있습니다. 같은 조건에서 요청 시작과 완료 시간을 비교하세요.
한글 서브셋은 무조건 적용해야 하나요?
파일이 큰 경우 효과가 있지만 문자 누락 위험이 있습니다. 글, 메뉴, 작성자명과 사용자 입력까지 고려할 수 없다면 무리하게 줄이지 말고 먼저 굵기와 중복 요청을 정리하세요.
공식 자료
마무리
워드프레스 웹폰트 최적화의 목표는 단순히 WOFF2 파일을 만드는 것이 아닙니다. 필요한 굵기만 남기고, 브라우저가 파일을 발견하는 시점을 앞당기며, 글자를 빠르게 보여주되 교체 순간의 CLS를 줄여야 합니다. 변경 전후의 Network 기록과 모바일 화면을 비교해야 전송량과 실제 읽기 경험을 함께 개선할 수 있습니다.
댓글 0
첫 댓글을 남겨보세요.