웹 폰트 최적화

• 웹 폰트: 웹에서 url등으로 다운받음
• 웹 세이프 폰트: 사용자의 로컬에 이미 다운받아져 있는 폰트
  • 시스템 폰트: 웹 세이프 폰트중 시스템에 사용하는 폰트

웹 폰트 사용시 권장사항

1. 웹 폰트는 두 개 이하로 사용하기

페이지 렌더링은 웹 폰트 파일이 모두 다운로드 완료될 때까지 차단된다!

2. 웹 폰트 자체 포스팅하기

http에서 캐시 파티셔닝을 도입하면서 웹 폰트 자체 호스팅이 권장됨!

캐시 파티셔닝

사이트 격리 기반의 캐싱 메커니즘.
예전에는 동일한 CDN을 사용하는 웹사이트간 캐시 데이터를 공유했으나, 이제는 사용자 활동 추적 방지를 위해 사이트별로 캐시가 각각 저장된다.
-> 어차피 매번 폰트를 새로 다운받으니 그냥 자체 서버에 올리라는 소리.

3. Google Fonts 자체 호스팅하기

• Google Web Fonts Helper (https://gwfh.mranftl.com/fonts) 
  @font-face 규칙을 생성하며, 폰트 파일을 WOFF2 형식으로 변환해 줍니다

WOFF2 포맷

브로틀리 압축을 사용하여 압축률이 우수하고, 모든 최신 브라우저에서 제공되는 폰트 포맷.

4. CSS에 @font-face 추가하기

@font-face를 선언하면 페이지에서 사용되는 폰트만 다운받으므로, 성능을 향상시킨다!

디스크립터

디스크립터	웹 성능 이점	향상되는 성능 지표
unicode-range	지정된 문자가 페이지에 사용될 때만 폰트 파일 다운로드	FCP, LCP
local()	사용자가 폰트를 로컬에 설치했는지 확인 후 사용 반드시 url전에 와야 함!	TTFB, FCP, LCP
font-display	브라우저가 사용할 대체(fallback) 전략 정의	CLS
size-adjust	주요 폰트와 대체 폰트의 크기 조정 웹 폰트와 대체 폰트의 크기를 맞춰 레이아웃 이동 방지	CLS

@font-face {
  font-family: 'Anonymous Pro';
  font-style: italic;
  font-weight: 400;
  unicode-range: U+1F642; //스마일 이모지가 사용될 때만 해당 폰트 다운
  src: local('Anonymous Pro Regular'), //로컬에 있는지 확인 후 다운
       local('AnonymousPro-Regular'),
       url('/fonts/anonymous-pro-v21-latin-regular.woff2') format('woff2'); //다운 요청 보냄
  font-display: optional; //optional, fallback사용시 CLS를 줄일 수 있다
  size-adjust: 113%; //폰트 크기 조정

}
body {
  font-family: 'Anonymous Pro', monospace;
  font-style: italic;
}

font-display 속성값 종류

렌더링 전략	설명	권장 대상
block	웹 폰트가 로드될 때까지 텍스트 숨김	맞춤형 타이포그래피가 중요한 경우
swap	웹 폰트 로드 전에는 대체 폰트를 사용하고 로드되면 교체합	커스텀 타이포그래피가 중요한 경우
optional	웹 폰트를 로드하지 못해도 대체 폰트 유지	긴 텍스트 블록에서 성능이 중요한 경우
fallback	웹 폰트가 로드되면 대체 폰트를 커스텀 폰트로 교체	긴 텍스트 블록에서 커스텀 타이포그래피가 중요한 경우
auto	기본 렌더링 전략	기본값

사전 연결(Preconnect) 링크로 폰트 렌더링 속도 높이기

페이지 렌더링 과정에서 외부 도메인과의 HTTP 연결을 미리 설정해 필요할 때 즉시 사용할 수 있도록 하는 리소스 힌트.
구글의 CDN에 미리 연결하면 폰트 로딩 속도를 높일 수 있다.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />