← 질문 목록
#397깊이 0
웹폰트 렌더링 시 FOUT과 FOIT는 무엇으로 결정하는가?
프론트엔드
답변 연습
내 답변 적어보기접힘
이 브라우저에 자동 저장 · 0자
모범답안 확인하기내 답변 뒤에 열어보세요
텍스트의 즉시 전달이 중요하면 FOUT을, 디자인 일관성이 중요하면 FOIT를 고른다.
| 기준 | FOUT | FOIT |
|---|---|---|
| 초기 표시 | 기본 폰트로 즉시 표시 | 폰트 다운로드까지 숨김 |
| 주 위험 | 레이아웃 이동 발생 | 빈 화면 대기 시간 증가 |
font-display 속성으로 두 방식을 지정한다. swap 값은 FOUT으로 동작해서 콘텐츠를 바로 보여준다.
block 값은 FOIT로 동작해서 폰트를 받기 전까지 차단한다. 텍스트가 늦게 뜨면 사용자 이탈이 늘어난다.
중요한 텍스트에는 preload로 폰트 다운로드를 당긴다. 렌더링 차단을 줄이면서 시각 차이를 줄인다.