Next.js
Next.js에서 로컬 폰트 최적화 하기
0. FOIT과 FOUT 토이프로젝트로 지뢰찾기를 만들던 중 배포 후 폰트가 늦게 적용되는 현상이 나타났다. 폰트가 늦게 적용되는 현상에는 FOIT(Flash of Invisible Text), FOUT(Flash of Unstyled Text)가 있는데,FOIT은 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 현상이고,FOUT은 브라우저가 폰트를 다운로드하기 전까지 폰트 스타일이 적용되지 않는 현상이다.나의 경우 FOUT 현상이 나타났다. 폰트가 늦게 적용되는 현상이 일어나는 것은 브라우저의 동작에서 원인을 찾을 수 있다.아래 그림은 브라우저가 페이지를 렌더링할 때 정보를 요청하는 순서를 나타낸다. T0: 브라우저가 HTML 문서 요청T1: DOM 구성, 브라우저가 CSS, JS 및 기타 ..
