FOIT과 FOUT 문제 해결 방법 | Notion

페이지 렌더링 이후 웹 폰트가 뒤늦게 적용되어 발생하는 문제

Flash of Invisible Text (FOIT) : 브라우저가 폰트를 다운로드 하기 전에 폰트가 보이지 않는 현상
Flash of Unstyled Text (FOUT): 브라우저가 폰트를 다운로드하기 전에 폰트가 적용되지 않은 글자가 보이는 현상

문제 분석

웹 폰트 로드가 늦어지는 것이 원인

해결책

웹 폰트 로딩 최적화 참고
WOFF2 글꼴 형식 사용
- WOFF2 글꼴은 글꼴 파일의 크기를 줄여 로딩 시간을 단축하는 압축 형식
**<head/>**에 **<link rel="preload">**를 사용하여 폰트 파일 미리 로딩하기
- 리소스 힌트에는 prefetch, pre-connect, preload 등이 있
```
<link
  rel="preload"
  href="/typefesse.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
```
브라우저에 가능한 빠르게 폰트를 다운로드 하게 할 수 있음.
가능한 **<head>**의 가장 앞자리에 설정하는 것이 좋음.

<aside> 📌 브라우저는 현재 페이지에 필요한 폰트만 다운로드 할 수 있을 정도로 충분히 똑똑하다. **preload**를 사용하면, 이 동작이 리셋되어 브라우저가 사용하지 않더라도 폰트를 다운로드 해야 한다. 따라서 각 폰트의 단일 포맷에 대해서만 이 옵션을 사용해야 한다.

그러므로, 더 많은 폰트를 사전 로드할 수록 이 기법의 이점이 줄어든다. 따라서, 화면에 최초에 표시되는 (above the fold, 100vh)로 표시되는 폰트에 이 속성을 지정하는 것이 좋다.

</aside>

웹 폰트 로딩을 더 빠르게 하는 방법