웹 글꼴은 필요한 글리프와 스타일을 줄이고 파일을 받는 동안 텍스트를 읽을 수 있게 하며 최종 글꼴과 잘 맞는 대체 글꼴을 선택해 최적화합니다. WOFF2, 서브셋, 선택적 미리 로드는 전송과 발견을, font-display와 대체 메트릭은 표시를 다룹니다. 빠른 다운로드만으로 늦은 글꼴 교체의 이동을 막을 수 없으므로 초기 가독성과 레이아웃 안정성을 함께 측정합니다.
글꼴을 바꾸기 전에 지연을 찾습니다
웹 글꼴은 대개 CSS에서 발견됩니다. 브라우저는 스타일시트를 찾고 @font-face를 해석한 뒤 텍스트에 필요한 페이스를 결정해야 요청합니다. 느린 스타일시트나 import 사슬은 작은 글꼴 파일도 늦출 수 있습니다.
Network에서 글꼴을 필터링하고 요청 시작자를 확인합니다. 어떤 스타일시트가 요청했는지, 첫 화면에 쓰는 페이스인지 기록합니다. CSS 첫 번째 가족이 모든 문자를 그린다고 가정하지 말고 DevTools에서 실제 렌더링된 글꼴을 봅니다.
글리프가 없으면 한 문장에서도 여러 대체 글꼴을 쓸 수 있습니다. 구두점, 통화, 이름, 혼합 언어에 중요합니다. 라틴 문단이 정상이라고 한국어나 히브리어 범위까지 보장되지는 않습니다.
느린 연결과 빈 캐시로 관찰합니다. 보이지 않는 텍스트는 표시 정책, 폭 변화는 대체 메트릭, 늦은 요청은 발견 문제를 가리킵니다. 큰 텍스트가 LCP라면 LCP 가이드, 이동이 문제라면 레이아웃 이동 가이드를 사용합니다.
전송하는 페이스와 글리프를 줄입니다
현대 브라우저에는 WOFF2가 일반적인 출발점입니다. 소스는 빌드 자산에 보관하되 지원 요구가 없으면 오래된 형식을 여러 개 보내지 않습니다. 자체 호스팅, 수정, 서브셋 생성 전 라이선스를 확인합니다. 다운로드 가능하다는 사실이 파생 파일 재배포 허가를 뜻하지 않습니다.
가족, 굵기, 스타일의 실제 사용을 조사합니다. 모든 굵기나 기울임이 필요하지 않을 수 있습니다. 불필요한 선언과 요청을 원본에서 제거합니다. 이후 굵게와 기울임을 확인해 의도치 않은 합성 스타일이 생기지 않게 합니다.
서브셋은 선택한 글리프와 필요한 렌더링 테이블을 담은 작은 파일입니다. unicode-range는 페이스의 코드 포인트 범위를 알릴 뿐 파일의 글리프를 물리적으로 없애지 않습니다. 전송량을 줄이려면 참조 파일 자체가 적절한 서브셋이어야 합니다.
아래 라틴 선언은 파일이 존재하며 명시한 문자를 실제로 포함한다는 가정의 예시입니다.
@font-face {
font-family: "Editorial Sans";
src: url("/fonts/editorial-sans-latin-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
unicode-range: U+0000-00FF;
}
body {
font-family: "Editorial Sans", Arial, sans-serif;
}이 범위는 완전한 다국어 전략이 아닙니다. 여러 문자를 제외하므로 여섯 언어 사이트의 유일한 서브셋으로 사용할 수 없습니다. 글자 조합 처리, 구두점, 필요한 부호를 테스트합니다. 범위 선언이 없는 글리프를 만들어 주지는 않습니다.
경계는 유지보수 가능해야 합니다. 기사마다 작은 파일을 만들면 해당 페이지의 바이트는 줄어도 페이지 간 재사용과 갱신이 어려워집니다. 바뀌는 편집 콘텐츠에는 언어나 문자별 안정적인 서브셋이 더 관리하기 쉬울 수 있습니다. 더 나누기 전에 대표 페이지의 실제 요청을 측정합니다.
font-display를 읽기 정책으로 선택합니다
font-display는 @font-face 안의 설명자이며 페이스가 없을 때의 표시를 제어합니다. body에 지정해도 개별 페이스를 설정하지 않습니다. 즉시 읽기, 나중의 의도한 글꼴 사용, 눈에 보이는 교체 사이의 선택입니다.
다음 기간의 정확한 시간은 브라우저가 제어하며 어디서나 같은 초시계 값이 아닙니다.
| 값 | 실제 동작 | 주요 고려점 |
|---|---|---|
auto |
브라우저가 정책 선택 | 초기 제어가 덜 명시적 |
block |
짧은 차단 후 무제한 교체 기간 | 처음에는 텍스트가 안 보일 수 있음 |
swap |
매우 짧은 차단 후 무제한 교체 | 일찍 읽지만 늦은 이동 가능 |
fallback |
매우 짧은 차단과 짧은 교체 | 기간 이후에는 최종 글꼴로 바뀌지 않을 수 있음 |
optional |
매우 짧은 차단, 교체 기간 없음 | 해당 방문에서 대체 글꼴 유지 가능 |
swap은 최종 글꼴이 도착하면 쓰게 하지만 CLS를 자동 해결하지 않습니다. 다른 문자 폭과 줄 메트릭은 줄바꿈과 아래 콘텐츠를 바꿉니다. optional은 늦은 교체를 피할 수 있지만 대체 글꼴에서도 디자인이 적절해야 합니다.
장식적인 워드마크와 긴 본문에는 다른 정책이 맞을 수 있습니다. 브랜드 취향 때문에 본문을 읽지 못하게 하지 않습니다. 실제 내용과 기기로 검사합니다. 캐시가 있을 때 좋은 선언도 첫 방문에는 방해가 될 수 있습니다.
font-display 참조를 확인하고, 정상 전송과 차단 상태를 모두 시험해 대체 상태를 의도적으로 설계합니다.
정말 중요한 페이스만 미리 로드합니다
미리 로드는 일반 CSS 발견보다 요청을 앞당기지만 HTML, CSS, LCP 이미지가 경쟁하는 초기 대역폭을 사용합니다. 모든 굵기와 언어 서브셋을 미리 로드하면 필요에 따른 선택을 상당 부분 무력화합니다.
이 예제는 첫 화면의 페이스 하나를 미리 로드하며 CSS에 정확히 같은 URL을 씁니다.
<link rel="preload"
href="/fonts/editorial-sans-latin-regular.woff2"
as="font" type="font/woff2" crossorigin>
<style>
@font-face {
font-family: "Editorial Sans";
src: url("/fonts/editorial-sans-latin-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
</style>자체 호스팅을 포함해 글꼴 미리 로드에는 적절한 CORS 모드가 필요합니다. 다른 출처라면 응답도 요청을 허용해야 합니다. URL, 자원 유형, 모드를 일치시켜 두 번째 다운로드 없이 재사용하게 합니다.
미리 로드 자체가 글꼴을 적용하지는 않습니다. 곧 사용되는지, Console에 미사용 경고가 없는지 확인합니다. 전후 워터폴을 비교합니다. 더 중요한 이미지를 늦추면서 글꼴만 앞당기면 나쁜 선택일 수 있습니다.
외부 서비스에서는 스타일시트와 파일 출처를 따로 봅니다. 선택적 preconnect는 연결 수립을 줄일 수 있지만 CSS 발견을 제거하거나 개선을 보장하지 않습니다. 모든 외부 도메인에 붙이지 않습니다.
대체 글꼴의 메트릭을 맞춥니다
비슷한 모양도 공간은 다를 수 있습니다. 문자 폭, x 높이, 상승부와 하강부, 줄 간격을 비교합니다. 추가 한 줄은 아래 내용을 모두 밀기 때문에 작은 형태 차이보다 중요할 수 있습니다.
size-adjust는 윤곽과 메트릭을 배율 조정합니다. ascent-override, descent-override, line-gap-override는 수직 메트릭을 조절합니다. 실제 목표와 대체 쌍으로 값을 구해야 하며 모든 글꼴과 운영체제에 맞는 비율은 없습니다.
다음은 예시 수치로 문법을 보여주며 실제 “Editorial Sans”에 보정한 값이 아닙니다. 실제 글꼴을 측정한 뒤 바꿉니다.
@font-face {
font-family: "Editorial Fallback";
src: local("Arial");
size-adjust: 100%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
.article-body {
font-family: "Editorial Sans", "Editorial Fallback", sans-serif;
line-height: 1.6;
}로컬 글꼴은 기기에 있어야 합니다. 끝에 일반 가족을 남기고 지정 글꼴이 없는 시스템도 시험합니다. 오버라이드는 차이를 줄일 뿐 모든 문자열의 줄바꿈을 같게 보장하지 않습니다.
제목, 긴 메뉴명, 숫자, 구두점, 문단으로 비교합니다. 모든 언어에 영어 샘플을 복제하지 말고 번역 콘텐츠를 사용합니다. 명시적 줄 높이는 수직 리듬을 안정화하지만 다른 문자 폭의 줄바꿈은 막지 못합니다.
가변 글꼴과 실제 필요한 스타일을 비교합니다
가변 글꼴은 여러 굵기나 축을 한 파일에 담아 정적 파일 여러 개를 대체할 수 있습니다. 그러나 실제 필요한 정적 스타일 한두 개보다 항상 작지는 않습니다. 마케팅 설명 대신 전달하는 서브셋과 축을 비교합니다.
파일이 지원한다는 가정하에 다음 선언은 100부터 900까지 굵기를 제공합니다.
@font-face {
font-family: "Editorial Variable";
src: url("/fonts/editorial-variable-latin.woff2") format("woff2");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
h1 { font-family: "Editorial Variable", sans-serif; font-weight: 650; }없는 축 범위를 선언하지 않습니다. 기울임 지원은 별도로 검사하고 문서의 사용법을 따릅니다. 빌드 도구가 축을 줄이면 시각적, 기능적으로 확인합니다. 예상하지 못한 축 제거가 디자인을 조용히 바꿀 수 있습니다.
한국어, 히브리어와 시스템 대체를 계획합니다
한국어는 라틴 전용 인터페이스보다 넓은 글리프 전략이 필요합니다. 포괄적인 CJK 파일은 클 수 있고, 과도한 페이지별 서브셋은 동적 텍스트, 이름, 새 기사를 빠뜨릴 수 있습니다. 안정된 서브셋, 서비스가 문서화한 분할, 시험한 시스템 스택을 검토합니다. 라틴 약어와 숫자가 섞인 한국어 페이지의 요청도 봅니다.
히브리어는 해당 문자, 구두점, 지원하는 부호와 기술 용어의 라틴 문자가 필요합니다. 글꼴 선택이 문서 방향을 설정하지는 않습니다. RTL과 양방향 처리를 로딩 설정과 분리하고 코드 라벨, 숫자, 구두점을 문맥에서 검사합니다.
자체 호스팅은 URL, 캐시, 업데이트를 제어합니다. 서비스는 형식과 분할을 맡을 수 있지만 스타일시트와 출처를 더합니다. 어느 방식도 항상 빠르지는 않습니다. 실제 의존 사슬, 운영 책임, 개인정보 요구를 비교합니다.
시스템 글꼴은 유효한 최종 디자인 선택입니다. 별도 전송을 없애 빨리 표시할 수 있지만 플랫폼별 모양과 메트릭은 다릅니다. 의도적인 스택을 만들고 모든 문자를 시험합니다. 다운로드 제거는 가독성, 위계, 범위가 적절할 때 유용합니다.
한 변경을 실제 페이지 상태에서 검증합니다
첫 화면에 글꼴이 영향을 주는 페이지로 시작합니다. 요청, 읽을 수 있는 시점, 제목과 문단 이동을 기록합니다. 빈 캐시, 재방문, 글꼴 차단을 반복합니다. 해당 언어를 제공하면 한국어와 히브리어 페이지를 하나씩 포함합니다.
페이스, 서브셋, 미리 로드를 바꾼 후 중복 다운로드, 누락 글리프, 합성 굵기를 봅니다. 트레이스와 레이아웃을 함께 검토합니다. 작은 파일은 중간 결과이며 목표는 읽기 쉽고 안정적인 텍스트입니다.
선택한 파일과 표시 정책을 성능 체크리스트에 기록합니다. 발견이 여전히 늦다면 렌더링 차단 자원 분석으로 이어갑니다. 페이지 속도 최적화 과정에 테스트를 유지해 다음 디자인 변경이 불필요한 페이스나 불안정한 대체를 되살리지 않게 합니다.
