폰트 최적화 톺아보기

1. 폰트를 적용하는 시점

• FOUT 최소화: 폰트를 비동기 로드하여 텍스트가 기본 폰트로 표시되었다가 웹폰트가 로드되면 대체되도록 설정할 수 있습니다.

• FOIT 방지: font-display 속성을 swap으로 설정하면 폰트가 로드될 때까지 시스템 폰트를 사용하고, 로드 후 자동으로 웹폰트로 전환되어 텍스트가 가려지지 않습니다.

css
코드 복사
@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2');
  font-display: swap;
}

• font-display
• swap(FOUT) : 폰트를 다운받기 전에는 기본 폰트를 노출하고 다운로드 완료 후 폰트 교체
• block(FOIT) : 3초 내 폰트 다운받지 못하면 기본 폰트 노출
• fallback(FOIT) : 0.1초 정도 block이 발생하고, 3초 이내 다운받지 못하면 다운로드 여부와 상관없이 기본 폰트 노출
• optional(FOIT) : fallback과 유사하나, 폰트가 다운로드 받는 시간이 너무 오래 걸리면 브라우저가 연결 취소

2. 폰트 용량을 줄이기

• 서브셋 만들기: 사용하지 않는 글리프(문자)를 제거하여 필요한 글자만 포함된 서브셋 폰트를 생성하면 용량을 크게 줄일 수 있습니다. 특히, 다국어 폰트의 경우 서브셋이 유용합니다.

• 최적화된 포맷 사용: WOFF와 WOFF2 포맷은 압축된 형태로 제공되어 크기를 줄이는 데 효과적입니다. 브라우저 호환성을 고려해, WOFF2를 우선 사용하고 WOFF를 백업으로 제공하는 것이 좋습니다.

css
코드 복사
@font-face {
  font-family: 'CustomFont';
  src: url('customfont.woff2') format('woff2'),
       url('customfont.woff') format('woff');
}

• Google Fonts 최적화 기능: Google Fonts API에서는 필요 없는 글리프를 제외할 수 있고, 원하는 폰트 가중치만 불러올 수 있어 불필요한 데이터를 줄일 수 있습니다.

3. 폰트를 사전 로드하기

• 사전 로드 태그 사용: <link rel="preload"> 태그를 통해 폰트를 미리 로드하면 브라우저가 이를 우선적으로 다운로드하여 레이아웃 이동을 방지합니다.

html
코드 복사
<link rel="preload" href="customfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

• 사전 연결 (DNS Prefetch): 폰트가 외부 리소스라면 DNS 연결을 미리 설정하여 네트워크 지연을 줄일 수 있습니다.

html
코드 복사
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>