📢 FOIT & FOUT 개념 정리
1️⃣ FOIT (Flash of Invisible Text)
- 의미:
폰트가 로드될 때까지 텍스트가 보이지 않는 현상 - 특징:
- 텍스트가 아예 보이지 않다가 폰트가 로드되면 갑자기 나타남
- 사용자는 "글자가 사라졌다가 등장"하는 것처럼 느낌
- 발생 원인:
- 웹폰트 로딩 지연 시 발생
- 브라우저가 폰트 로드 전까지 텍스트를 숨김
2️⃣ FOUT (Flash of Unstyled Text)
- 의미:
폰트가 로드되기 전, 기본 시스템 폰트로 먼저 표시된 후 로드가 완료되면 폰트가 변경되는 현상 - 특징:
- 텍스트가 기본 폰트로 보이다가 웹폰트 로드 후 갑자기 스타일이 바뀜
- 사용자 입장에서는 "글꼴이 깜빡이며 바뀌는" 느낌
- 발생 원인:
- 폰트 로딩 시간이 길 경우
- 기본 폰트로 우선 렌더링 후 웹폰트로 교체됨
📍 폰트 표시 방식 최적화 방법
1️⃣ font-display 속성 사용하기
- 폰트 로딩 시 FOIT, FOUT을 제어할 수 있음
- 옵션:
@font-face { font-family: 'CustomFont'; src: url('customfont.woff2') format('woff2'); font-display: swap; /* FOUT 방식으로 렌더링 */ }swap: 기본 폰트로 먼저 표시 후, 웹폰트 로드 시 교체 (FOUT 유도)block: 폰트 로딩 전까지 숨김 (FOIT 유도)fallback:swap과block의 중간 형태optional: 폰트 로딩 실패 시 기본 폰트 유지
2️⃣ 압축률 높은 폰트 사용하기 (WOFF/WOFF2)
- WOFF, WOFF2는 압축률이 높아 빠른 로딩 속도 제공
- WOFF2가 가장 효율적 → 최적의 성능을 위해 사용 권장
📢 결론
- FOIT 방지:
font-display: swap;설정 - 빠른 로딩: WOFF2 같은 고압축 폰트 사용
- 최적화된 UX: 기본 폰트와 웹폰트 간 깜빡임 최소화
✅ Fallback Font란?
Fallback Font(폴백 폰트)는 웹폰트가 로드되지 않을 경우 대신 표시되는 기본 폰트를 의미.
즉, 사용자가 웹사이트에 접근했을 때 지정한 폰트가 로딩되지 않으면 자동으로 대체 폰트를 보여주는 역할.
📌 왜 필요할까?
- 웹폰트 로딩 지연 시 빠르게 텍스트 표시
- 브라우저 호환성 문제로 폰트 적용이 안될 때 대비
- 사용자 경험(UX) 향상: 글자가 보이지 않는 FOIT 현상 방지
📍 사용 방법 (font-family)
body {
font-family: 'Roboto', 'Arial', 'Helvetica', sans-serif;
}Roboto: 기본으로 사용하려는 폰트Arial,Helvetica:Roboto가 로드되지 않을 때 대체할 폰트sans-serif: 모든 폰트가 실패하면 사용하는 최종 폴백 폰트 (브라우저 기본 폰트)
순서 중요: 왼쪽부터 차례대로 적용, 사용할 수 있는 폰트를 만나면 그걸로 결정됨
💡 Fallback Font 설정 팁
- 유사한 스타일의 폰트 배치: 폰트 변경 시에도 어색하지 않게
- 시스템 폰트 활용: 빠른 렌더링을 위해 OS 기본 폰트 사용 가능
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - 최종 폴백 지정:
serif,sans-serif,monospace같은 일반적인 폰트 패밀리로 마무리
✅ 정리
- Fallback Font: 웹폰트가 로드되지 않을 때 표시되는 대체 폰트
- 사용 이유: 로딩 지연, 호환성 문제 대비 → 가독성과 사용자 경험 유지
- 설정 방법:
font-family에 여러 폰트를 순서대로 나열
이렇게 하면 폰트 로딩 이슈가 발생해도 깔끔한 텍스트 표시를 유지할 수 있음
