FOUT / FOIT, 폰트 로딩 깜빡임

한 줄로

웹 폰트 로딩 중 글자가 깜빡이거나 사라지는 현상입니다. 두 가지 패턴에 각자 이름이 있습니다.

어디서 왔나

2010년경, 웹 폰트(Google Fonts, Typekit)가 본격화되면서 새 문제가 생겼습니다. 폰트 파일을 다운로드하는 동안 글자를 어떻게 표시할 것인가.

브라우저마다 두 가지 패턴이 나타났습니다.

FOUT (Flash of Unstyled Text, 비스타일 텍스트의 깜빡임): 시스템 기본 폰트로 먼저 표시한 뒤 웹 폰트 로딩이 완료되면 교체합니다. Firefox의 기본 동작입니다.

FOIT (Flash of Invisible Text, 보이지 않는 텍스트의 깜빡임): 웹 폰트 로딩 전까지 글자를 완전히 숨겼다가 로딩 완료 후 표시합니다. Chrome, Safari의 기본 동작이었습니다 (2017년까지).

웹 디자이너 Paul Irish가 2009년 본인 블로그에서 이 두 패턴에 이름을 붙였습니다. 그 후 표준 용어가 됐습니다.

어느 게 더 나쁜가

FOUT: 일단 글이 보이지만 폰트가 바뀌면서 레이아웃이 흔들립니다.

FOIT: 글이 안 보여서 사용자가 "비어 있다"고 느끼고 이탈합니다.

거의 모든 사용성 연구에서 FOIT가 더 나쁘다고 결론 내렸습니다. 텍스트가 안 보이는 화면은 사용자 신뢰를 빠르게 잃습니다.

해결책

1. font-display: swap (CSS)

@font-face { font-family: 'Inter'; src: url('Inter.woff2') format('woff2'); font-display: swap; }

swap은 시스템 폰트로 즉시 표시하고, 웹 폰트가 로딩되면 교체합니다. FOIT를 방지합니다.

2. preload 힌트

<link rel="preload" href="Inter.woff2" as="font" type="font/woff2" crossorigin>

폰트를 우선순위로 다운로드합니다. 깜빡임 자체를 줄입니다.

3. 시스템 폰트 fallback

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

웹 폰트가 못 로딩되면 시스템 폰트를 사용합니다. Apple SD 산돌고딕(macOS), Segoe UI(Windows)는 한국어도 잘 지원합니다.

4. Variable font

하나의 파일이면 다운로드 한 번. FOUT 시간을 절약합니다.

바이브 메이커가 챙길 한 가지

font-display: swap을 모든 웹 폰트에 적용합니다. 5초 만에 끝나는 작업인데 초기 사용자 체감 속도가 크게 좋아집니다. Google Fonts는 URL 끝에 &display=swap만 추가하면 됩니다.

관련

Web fonts · Variable fonts · Skeleton screen