[250702] TIL

Today I Learned (2025-07-02)

웹 폰트의 문제점

FOUT (Flash of Unstyled Text)

• 폰트를 다운로드 하기 전에 기본 폰트 보여주고 다운로드가 완료되면 폰트가 적용됨
• 깜빡임이 발생
• 파우트
• IE, Edge

FOIT (Flash of Invisible Text)

• 포이트
• 폰트가 다운로드전에는 폰트를 보여주지 않다가 다운로드가 완료되면 보여줌
• 크롬, 사파리

웹 폰트의 최적화 방법

1. 폰트 적용 시점 컨트롤 하기
2. 폰트 사이즈 줄이기

1. 폰트 적용 시점 컨트롤 하기

font-display

• auto 브라우저 기본 동작
• block FOIT (timeout = 3s) , 3초까지는 기다렸다가 이후는 기본 텍스트
• swap : FOUT
• fallback FOIT (timeout = 0.1s),0.1초간 FOIT , 3초 후에도 불러오지 못했을 시, 기본 폰트로 쭉 보여줌 (캐시 해둬서 이후엔 폰트 적용)
• optional : FOIT - 시간 상관없이 네트워크 상태에 따라 기본 폰트 유지할지 적용할지 결정, 이후 캐시 구글에서는 optional 을 권장함

font base observer

폰트 다운로드 되면 fadeIn 애니메이션으로 폰트 뜨도록 함 체감 성능을 개선, 사용자에게 갑자기 UI가 뜨는 거부감을 덜어주고 싶음

font base observer 를 통해 폰트 다운로드 시점을 파악하고 스타일을 적용해줌