사용자가 웹 페이지 요청 시 HTML 문서 브라우저로 전송
브라우저는 이를 파싱하면서 CSS 파일 로드하고, CSS 내에 font-face가 있는지 확인함
이@font-face를 통해 브라우저는 폰트 파일의 위치와 스타일을 파악하게 됨
다음으로, 브라우저는 @font-face에 명시된 정보와 폰트를 로컬 시스템에서 가져오거나 네트워크 요청을 통해 불러옴
이때, 폰트는 일반적으로 woff나 woff2같은 형식 사용.
이 형식이 용량이 작고 압축률이 높아 웹에서 널리 사용
폰트가 로드되기 전 텍스트가 어떻게 렌더링될진 CSS 속성 설정에 따라 달라짐
만약 font-display속성이 swap으로 설정되어 있다면, fallback 폰트가 먼저 적용되었다가 폰트가 로드된 후 교체됨.
이때 텍스트의 형태가 순간적으로 변하는 FOUT 현상 발생할 수 있음
반면, block으로 설정되어 있다면 웹 폰트가 완전히 로드될 때까지 텍스트가 보이지 않음
이로 인해 폰트가 순간적으로 보이지 않았다가 등장하며 깜빡이는 FOIT현상이 발생할 수 있음
FOUT, FOIT 현상 일어나지 않게 가능?
사전 로딩 위해 preload 속성 사용 시
ex- <link rel='preload' as='font'>
브라우저가 폰트 요청을 우선적으로 처리할 수 있음
이를 통해 폰트가 이른 시점에 로드되어 FOUT나 FOIT이 발생하지 않도록 할 수 있음
또한 font-display: optional 사용도 가능
이를 사용 시 폰트가 빠르게 로드되지 않을 경우 fallback 폰트 그대로 유지함으로써 텍스트의 형태가 순간적으로 변화하는 현상 막을 수 있음
