글꼴 최적화: 하위 설정, 가변 글꼴 및 글꼴 표시
웹 글꼴은 성능 최적화에서 간과되는 요소인 경우가 많습니다. 에이 최적화 없이 Google Fonts를 사용하는 사이트는 300KB에서 800KB 사이로 로드될 수 있습니다. 글꼴만 — 렌더링을 차단하고 LCP에 영향을 미치며 레이아웃을 유발하는 리소스 글꼴 교환 중 이동. 올바른 기술을 사용하면 동일한 타이포그래피를 만들 수 있습니다. 60KB 미만이 필요하며 눈에 띄는 변화가 발생하지 않습니다.
웹폰트 시장은 최근 몇 년간 급격하게 변화했습니다. 그만큼 변수
글꼴 모든 변형(일반, 굵은 글꼴, 기울임꼴)을 포함할 수 있습니다.
4개 이상의 개별 파일이 아닌 단일 파일. 하위 설정으로 파일이 줄어듭니다.
불필요한 글리프를 제거합니다. 그리고 전략 font-display 허용하다
로드할 때 브라우저가 작동하는 방식을 정확하게 제어합니다.
무엇을 배울 것인가
- WOFF2의 작동 방식과 WOFF2가 웹에 가장 적합한 형식인 이유
- 글꼴 하위 설정: pyftsubset 및 Glyphhanger를 사용하여 파일을 400KB에서 60KB로 줄입니다.
- 가변 글꼴: 모든 변형을 위한 하나의 파일, 40-60% 절감
- 글꼴 표시 전략: 교체, 선택 사항, 대체, 차단
- 필요한 하위 집합만 로드하는 unicode-range
- FOIT(Flash of Invisible Text)를 제거하기 위한 사전 연결 및 사전 로드
- 글꼴 교체로 인한 CLS를 줄이기 위해 메트릭(@font-face)을 재정의하세요.
WOFF2: 웹 글꼴의 표준 형식
WOFF2(Web Open Font Format 2)는 Brotli 압축을 사용하여 결과적으로 WOFF에 비해 30-50%, 원래 OTF/TTF 형식에 비해 60-70%입니다. 브라우저 지원은 보편적이므로(최신 브라우저의 100%) 더 이상 필요하지 않습니다. 지난 5년간의 브라우저를 대상으로 한 사이트에 대해 WOFF 또는 TTF 대체를 제공합니다.
/* Configurazione @font-face moderna: solo WOFF2 */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Variable font: un unico file per tutti i pesi */
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900; /* range continuo */
font-style: normal;
font-display: swap;
}글꼴 하위 설정: 파일을 필요한 최소 수준으로 줄입니다.
Inter Regular와 같은 완전한 글꼴 파일에는 약 2,400개의 커버 글리프가 포함되어 있습니다. 수백 가지 언어. 사이트가 이탈리아어와 영어로만 되어 있는 경우 다음이 필요합니다. 글리프가 300개 미만입니다. 하위 설정은 사용하지 않는 모든 글리프를 제거하여 파일 크기가 대폭 늘어납니다.
pyftsubset을 사용한 하위 설정(Python)
# Installa fonttools
pip install fonttools brotli
# Subset per Latin Extended (caratteri italiani inclusi)
pyftsubset Inter-Regular.ttf \
--output-file=inter-regular-subset.woff2 \
--flavor=woff2 \
--unicodes="U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, \
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, \
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
# Risultato tipico:
# Inter-Regular.ttf: 1.2MB (OTF originale)
# inter-regular-subset.woff2: ~52KB (riduzione del 95%)Glyphhanger: 분석 및 자동 하위 설정
Glyphhanger는 사이트(또는 정적 HTML)를 스캔하고 최소 하위 집합을 생성합니다. 실제로 사용된 문자를 기반으로 합니다.
# Installa
npm install -g glyphhanger
# Scansiona un sito e genera il subset per i font usati
glyphhanger https://tuosito.com --subset=/fonts/*.ttf --formats=woff2 --LATIN
# Scansiona file HTML locali
glyphhanger ./dist/**/*.html --subset=/fonts/*.ttf --formats=woff2unicode-range: 조건부 하위 집합
부동산 unicode-range in @font-face 지시한다
브라우저는 페이지에 해당 글꼴이 포함된 경우에만 해당 글꼴 파일을 다운로드합니다.
유니코드 범위. 이는 Google Fonts가 하위 집합을 제공하는 데 사용하는 메커니즘입니다.
다른 언어를 사용하는 사용자마다 다릅니다.
/* Subset Latin di base - scaricato per tutti */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-latin.woff2') format('woff2');
font-weight: 400;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* Subset Cirillico - scaricato solo se la pagina usa cirillico */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-cyrillic.woff2') format('woff2');
font-weight: 400;
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}가변 글꼴: 모든 변형을 위한 하나의 파일
OpenType 1.8 사양에 도입된 가변 글꼴을 사용하면 단일 글꼴을 사용할 수 있습니다. 하나 이상의 변형 축을 따라 변형의 연속체를 포함하는 파일입니다. 가장 일반적인 축은 다음과 같습니다.
- wght (무게): 100 ~ 900
- wdth (폭): 압축, 보통, 확장
- 이탈 (이탤릭체): 수직에서 이탤릭체로
- 슬런트 (slant) : 문자의 기울어짐
- 이런 (광학 크기): 다양한 크기에 대한 최적화
/* Variable font con asse weight */
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Uso di font-variation-settings per control granulare */
h1 {
font-family: 'Inter Variable', sans-serif;
font-weight: 700;
/* Oppure usando direttamente variation settings */
font-variation-settings: 'wght' 700, 'opsz' 32;
}
p {
font-family: 'Inter Variable', sans-serif;
font-weight: 400;
font-variation-settings: 'wght' 400, 'opsz' 16;
}
/* Animazione fluida del peso con variable fonts */
.title-animated {
font-family: 'Inter Variable', sans-serif;
transition: font-variation-settings 0.3s ease;
}
.title-animated:hover {
font-variation-settings: 'wght' 800;
}가변 글꼴을 통한 실제 비용 절감
| 대본 | 전통적인 접근 방식 | 가변 글꼴 | 저금 |
|---|---|---|---|
| 4가지 무게 (400,500,600,700) | 파일 4개 × 30KB = 120KB | 파일 1개 = 48KB | 60% |
| 가중치 4개 + 이탤릭체 | 파일 8개 × 30KB = 240KB | 파일 1개 = 72KB | 70% |
| 전체 디스플레이 글꼴 | 12개 파일 = 360KB | 1~2개 파일 = 90KB | 75% |
글꼴 표시 전략
부동산 font-display 브라우저가 처리하는 방법을 제어합니다.
웹 글꼴을 로드하는 동안 텍스트가 표시됩니다. 선택
올바른 전략은 FOIT(Flash of Invisible Text)와
FOUT(Flash of Unstyled Text)와 CLS 및 LCP에 미치는 영향.
글꼴 표시: 교환(가장 일반적)
브라우저는 즉시 시스템 글꼴(FOUT)로 텍스트를 표시한 다음 이를 대체합니다. 사용 가능한 경우 웹 글꼴을 사용합니다. FOIT는 없지만 글꼴이 있는 경우 잠재적인 CLS 그들은 다른 측정 항목을 가지고 있습니다. 대부분의 사이트에 적합한 선택입니다.
글꼴 표시: 선택 사항(최대 성능을 위해)
브라우저는 시스템 글꼴로 텍스트를 표시합니다. 웹 글꼴이 다운로드됩니다. 하지만 매우 짧은 기간(약 100ms) 내에 사용 가능한 경우에만 사용됩니다. 연결이 느린 경우 해당 연결 중에 시스템 글꼴이 영원히 사용됩니다. 세션. FOUT, CLS는 없지만 웹 글꼴은 표시되지 않을 수 있습니다. 느린 연결에서. 성능이 미적 측면을 뛰어넘는 현장에 이상적입니다.
글꼴 표시: 대체(절충)
브라우저는 매우 짧은 차단 기간(약 100ms)을 갖고 폴백을 표시합니다. 3초 이내에 사용 가능한 경우에만 웹 글꼴로 대체됩니다. 3초 후, 시스템 글꼴은 세션 내내 유지됩니다. FOIT와 시각적 아이덴티티에 큰 영향을 미치는 글꼴의 경우 FOUT입니다.
전략의 시각적 비교
| 전략 | 차단 기간 | 스왑기간 | 포잇 | FOUT/CLS |
|---|---|---|---|---|
| 차단하다 | 3s | 무한 | 높은 | Si |
| 교환 | 0ms | 무한 | No | Si |
| 대체 | 100ms | 3s | 최저한의 | 제한된 |
| 선택 과목 | 100ms | 0ms | 최저한의 | No |
| 자동차 | 브라우저가 결정 | 브라우저가 결정 | 변하기 쉬운 | 변하기 쉬운 |
지표 재정의로 CLS 글꼴 교체 제거
CLS로 인한 CLS를 제거하는 가장 효과적인 기술 font-display: swap
대체 글꼴 메트릭을 웹 글꼴의 메트릭과 정렬합니다. CSS 속성
size-adjust, ascent-override, descent-override
e line-gap-override 이를 밀리미터 단위의 정밀도로 수행할 수 있습니다.
/* Trova i valori corretti per Inter su Arial come fallback */
/* Metodo 1: Usa lo strumento Fallback Font Generator di Malte Ubl */
/* https://screenspan.net/fallback */
/* Metodo 2: Calcola manualmente le metriche */
/* Inter: UPM 2048, ascender 1984, descender -494, line-gap 0 */
/* Arial: UPM 2048, ascender 1854, descender -434, line-gap 67 */
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
/* size-adjust: rapporto tra le dimensioni complessive */
size-adjust: 107.64%;
/* Override delle metriche verticali */
ascent-override: 90.2%;
descent-override: 22.48%;
line-gap-override: 0%;
}
/* Usa sempre il fallback ottimizzato come secondo nella stack */
body {
font-family: 'Inter', 'Inter Fallback', Arial, sans-serif;
}타사 글꼴에 대한 사전 연결 및 사전 로드
Google Fonts 또는 기타 타사 글꼴 CDN, DNS 및 TLS 연결을 사용하는 경우
해당 도메인에 대해서는 대기 시간이 추가됩니다. 지시문 preconnect e
preload 에서 <head> 이 오버헤드를 줄입니다.
<!-- Per Google Fonts: preconnect ai domini necessari -->
<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=Inter:wght@400;700&display=swap"
rel="stylesheet">
<!-- Ancora meglio: self-hosting con preload diretto -->
<link
rel="preload"
href="/fonts/inter-variable.woff2"
as="font"
type="font/woff2"
crossorigin
>경고: 예압을 남용하지 마십시오
Preload는 브라우저에게 해당 리소스를 높은 우선순위로 로드하도록 지시합니다. 중요한 CSS 및 JavaScript 리소스와 경쟁합니다. 예압은 다음의 경우에만 사용하세요. 스크롤 없이 볼 수 있는 부분의 기본 글꼴 - 일반적으로 본문 텍스트의 글꼴입니다. 보통 체중. 너무 많은 글꼴을 미리 로드하면 성능이 저하될 수 있습니다. 페이지를 개선하는 대신 일반 페이지를 개선합니다.
셀프 호스팅과 Google Fonts: 비교
자체 호스팅과 Google Fonts 간의 선택은 여러 요인에 따라 달라집니다. 자체 호스팅 더 많은 제어력과 더 나은 성능을 제공하며 타사 서비스에 대한 의존성이 없습니다. Google Fonts는 편리함과 사이트 간 공유 캐싱을 제공합니다(후자는 최신 브라우저 개인정보 보호 제한으로 인해 이점이 줄어들지만)
최대 성능을 위해 가변 글꼴 및 사용자 정의 하위 설정을 사용한 자체 호스팅 그리고 최적의 선택. 너무 많은 것을 희생하지 않고 구현 속도를 높이려면 성능, 올바른 사전 연결 지시어가 있는 Google 글꼴 및 허용 가능합니다.
/* Pipeline completa per self-hosting ottimizzato:
1. Scarica i font originali (OTF/TTF) dal sito del font designer
2. Crea subset con pyftsubset per Latin + caratteri speciali necessari
3. Converti in WOFF2
4. Carica i file in /public/fonts/
5. Configura gli header HTTP per il caching long-term
*/
/* Nel server (es: nginx) */
location ~* \.(woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Access-Control-Allow-Origin "*";
}다음 단계
글꼴 최적화를 마스터하면 CSS의 새로운 기능을 탐색할 준비가 되었습니다. 이는 반응형 구성요소를 구축하는 방식을 변화시키고 있습니다. 다음 시리즈의 기사에서는 CSS 컨테이너 쿼리: 빌드 방법을 자세히 설명합니다. 대신 컨테이너의 크기에 반응하는 구성 요소 뷰포트로 인해 반응형 유틸리티 클래스가 포함된 패턴이 더 이상 사용되지 않게 됩니다.
결론
웹 글꼴 최적화는 가장 큰 영향을 미치는 개입 중 하나입니다. 성능 최적화를 위한 노력. 최적화되지 않은 400KB 글꼴로 시작 재정의 측정항목을 사용하여 60KB의 가변 글꼴 하위 집합을 만들어 CLS에는 몇 시간의 일회성 작업이 필요하지만 LCP에 비해 영구적인 이점이 있습니다. 각 방문자의 CLS 및 대역폭.
2026년 권장 전략: WOFF2에서 가변 글꼴을 사용한 자체 호스팅,
라틴어 확장에 대한 하위 설정, font-display: swap 재정의 측정항목 포함
대체 글꼴의 경우 e <link rel="preload"> 글꼴의 경우
텍스트의 본문. 이 설정은 미적 손상 없이 기본 성능을 달성합니다.