FOUT은 Flash Of Unstyled Text의 약자로, ‘웹 페이지에서 폰트가 로드되기 전에 텍스트가 먼저 표시되는 현상’ 을 말한다.
브라우저가 사이트에 진입할 때 다음과 같은 과정을 거친다.
브라우저가 HTML 문서를 요청한다.
DOM 구성 & CSS,JS 및 기타 리소스 요청
CSSOM 구성 & 렌더트리 구축, 폰트 리소스 요청
Reflow, Repaint -> 폰트를 사용할 수 없는 단계면 브라우저는 글자를 렌더링하지 않을 수 있음
중요한 점은 CSSOM을 빌드하기 시작할때, font resource를 다운받기 시작한다는 것이다. 여기서 css file을 기반으로 First paint, Paint text가 끝날때까지 font resource를 다운받지 못했다면, 해당 자원을 사용하는 콘텐츠의 렌더링을 차단하게 된다.
결국 사용자의 네트워크의 속도, 폰트의 용량 등의 원인때문에 아름다웠던 웹디자인이 폰트가 다운로드 되지 않았다는 이유만으로 사용자는 날것의 디자인 지옥도를 보게 되는 것이다.
폰트 다운로드가 끝난 경우
FOUT 현상 예시
폰트 다운로드가 오래걸리면서 발생하는 이 현상에는 크게 4가지의 해결방법이 있다.
폰트 리소스 요청 시점을 더 앞당기도록 하는 방법이다. Font preloading이라고도 하며, <link>태그와 rel=”preload”로 할 수 있다.
<link rel="preload" href="/font.woff2" as="font" type="font/woff2" crossorigin />
단, preload에는 몇 가지 주의 사항이 있다.
as 속성 사용