font 최적화 정리1

FONT 최적화 관련 정리

1. 먼저 적용시점을 생각하고 작업을 시작하자.

웹 폰트에서의 문제점중 가장 크게 나오는 것이
FOUT(flash of Unstyled Text)
FOIT(flsah of Invisible Text)
두가지 문제가 자주 발견된다.
보통 두가지 문제가 있기에 최적화를 해서 저 두문제를 최적화하는 것이 중요하다.
방식은 여러가지가 있기에 정리를 해보려고 한다.

폰트 적용 시점 컨트롤 하기

1. 먼저 font-display 를 통해 기본값을 지정하여 두가지 중에서 어떤 점을 취하고 버릴지를 결정하여야한다.
   auto: 브라우저 기본 동작
   block: FOIT(3s timeout)
   swap: FOUT
   fallback:FOIT(timeout=0.1s)
   3초 후에도 불러오지 않으면 기본 폰트로 유지 이후 캐시
   optional:(timeout=0.1s)
   이후 네트워크 상태에 따라,기본 폰트로 유지할지 웹폰트를 적용할지 결정, 이후 캐시 구글이 권장함
   적용방식을 결정하였다면 그 뒤에는 적용시점을 좀 더 명확히 할 필요가 있다.

2. 폰트의 변경 시점에 맞는 로딩
   Font Face Observer 라는 라이브러리가 있다. JS의
   웹폰트가 로드되는 시점을 모니터링하고 알려줍니다
   Intersection Observer API 를 이용하였기에 간편하고 가볍다. 개별 컴포넌트마다 폰트 변경이 자주 일어난다면 한번 생각해볼 일이다. 혹은 react라면 state변경을 통한 CSS 변경도 한번 생각해볼수 있다고 생각한다.

3. 폰트 preload

폰트를 CSS 보다 먼저 로드하는 기능이다.

<link rel="preload" href="/myfont.woff2" as="font" type="font/woff2" crossorigin />

폰트 사이즈 줄이기

1. 실질압축
   먼저 폰트 사이즈도 최대한 줄이는 것이 중요하다.
   사이즈 크기순은 EOT>TTF>WOFF>WOFF2 순이다.
   fransfonter 사이트와 같은 곳에서 변환가능하다. 최근에는 WOFF2도 거의 모든 브라우저에서 지원하기 때문에 가능하다면 압축하여 사용하자
2. local

@font-face{
 font-family:"my font";
 src:local(),
     url()

}

local 이라는 함수에 나의 로컬 속 폰트를 입력하면 네트워크로 불러오지 않고 바로 적용할 수 있다. 로컬에 없다면 그뒤 URL이 적용된다.

3.subset

일부 글자만 사용한다면 일부 글자의 subset 만 적용하여 사용가능하다.