웹 폰트 최적화
웹 폰트의 문제점
FOUT (Flash of Unstyled Text)
폰트를 적용해 보면 폰트가 다운로드 되기 전에는 기본 폰트가 사용되고, 다운로드가 완료되었을 때 폰트가 적용되는 것을 확인할 수 있다. 이러한 현상을 FOUT라고 한다. 폰트가 적용되지 않더라도 텍스트 컨텐츠를 빠르게 확인할 수 있다.
ie, edge 등의 브라우저에서 사용하는 방식이라고 한다.
FOIT (Flash of Invisible Text)
폰트가 다운로드 되기 전에는 텍스트를 보여주지 않고, 폰트가 다운로드되면 텍스트를 보여주는 방식을 말한다. FOUT 방식에 비해서 텍스트를 확인하는데에 시간이 더 걸리게 된다.
Chrome 등에서 사용된다.
웹 폰트 최적화란 FOUT와 FOIT를 현상을 최소화하는 것을 말한다.
웹 폰트 최적화 방법
- 폰트 적용 시점 컨트롤 하기
- 폰트 사이즈 줄이기
폰트 적용 시점 컨트롤하기
font-display
CSS의 font-display 속성을 이용한다.
font-display속성에는 5가지의 값이 들어갈 수 있다.
- auto : 브라우저 기본 동작
- block : FOIT(timeout = 3s)
- swap : FOUT
- fallback : FOIT(timeout = 0.1s), 3초 후에도 불러오지 못했을 시, 기본 폰트로 유지, 이후 캐시
- optional : FOIT(timeout = 0.1s), 이후 네트워크 상태에 따라, 기본 폰트로 유지할 지 웹 폰트를 적용할지 결정, 이후 캐시.
구글에서는 optional 방식을 권장한다고 한다. 하지만 내가 제공하고자 하는 컨텐츠의 특성에 따라 적용하는 것이 좋다. 깜빡거리는 것보다 텍스트가 늦게 뜨더라도 적용된 텍스트를 보여주는 것이 낫다면 FOIT 방식을 사용하면 된다. 사용자 경험을 위해서 JS를 이용해 텍스트 노드가 마운트 되었을 때 fade-in을 적용하는 것도 좋다.
fontfaceobserver라는 모듈을 이용하여 font가 다운로드 된 시점을 캐치할 수 있다.
