웹 폰트 최적화하기

폰트 적용시점 때문에 내가 의도하지 않은 이슈가 생김.

웹폰트의 문제는 두가지로 정의할 수 있는데 FOUT(Flash of Unstyled Text)와 FOIT(Flash of Invisible Text)이다.

 

쉽게 말하면 FOUT는 웹 폰트가 다운로드 되기 전부터 컨텐츠가 노출되어 웹폰트가 적용되지 않은 텍스트가 노출되었다가 웹폰트로 적용되는 현상을 이야기하고 FOIT는 웹 폰트가 다운로드 될때까지 대기했다가 컨텐츠가 노출되어 내가 처음에 레이아웃과 함께 컨텐츠를 노출하고자 할때 에러사항이 있다. 이런 점들을 어떻게 개선시킬까?

 

고민하다가 유동균님의 강의에서 해당 방법을 찾을 수 있었다.

1. 폰트 적용 시점 컨트롤 하기
2. 폰트 파일 사이즈 줄이기

1. 폰트 적용 시점 컨트롤 하기
   이 부분은 @font-face를 사용해 본 사람은 다들 해봤을 옵션인 font-display의 옵션을 통해 할 수 있다.
   (옵션 : auto, block, swap, fallback, optional)
   → 구글에서는 optional을 선호함.
   ☞ fontfaceobserver라는 라이브러리를 통해 폰트가 다운로드 된 시점을 캐치해서 처리할 수 있음.

2. 폰트 사이즈 줄이기
  폰트 포멧에 따른 파일 크기 : EOT > TTF/OTF > WOFF > WOFF2
  폰트 포멧 변경하는 사이트 : https://transfonter.org/(유동균님 강의)