[최적화] font-display 최적화

웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인하기(참고URL)

⏺ font-display

font-display는 웹폰트가 로드되는 동안 텍스트를 어떻게 처리할지 지정하는 CSS 속성입니다. 다음은 font-display 속성의 여러 값에 대한 설명입니다

1. auto: 이 값은 브라우저에 웹폰트 로딩 방식을 자동으로 결정하도록 합니다. 일반적으로 브라우저가 최적의 방법을 선택하지만, 모든 브라우저에서 동작하지는 않습니다. 따라서 일관된 동작을 보장하기 위해 다른 값을 선택하는 것이 좋습니다.

2. block: 이 값은 웹폰트 로딩이 완료될 때까지 텍스트를 표시하지 않습니다. 로딩이 완료되면 텍스트가 한 번에 나타납니다. 사용자는 텍스트를 기다리는 동안 비어있는 영역을 볼 수 있지만, 웹폰트가 화면에 나타날 때까지 아무것도 표시되지 않습니다.

3. swap: 이 값은 웹폰트가 로드되기 전에 사용자에게 기본 시스템 폰트로 텍스트를 표시합니다. 그리고 웹폰트 로딩이 완료되면 텍스트가 웹폰트로 교체됩니다. 이 방식은 사용자 경험을 향상시키는 데 일반적으로 사용되는 값입니다.

4. fallback: 이 값은 웹폰트가 로드되는 동안 사용자에게 대체 폰트로 텍스트를 표시합니다. 웹폰트 로딩이 실패하면 시스템 폰트로 폴백됩니다.

5. optional: 이 값은 웹폰트가 로드되는 동안 텍스트를 표시하지 않으며, 웹폰트가 로드되지 않아도 텍스트가 표시됩니다. 이 값을 사용하면 웹폰트 로딩 시간에 관계없이 콘텐츠를 빠르게 표시할 수 있습니다. 그러나 폰트 스타일이 적용되지 않은 텍스트가 일시적으로 표시될 수 있습니다.

⏺ font-display 현상

1. FOIT(Flash of Invisible Text)은 웹폰트가 로드되는 동안 텍스트가 일시적으로 사라지는 현상을 말합니다. 웹폰트가 아직 로드되지 않은 상태에서 해당 폰트를 사용하는 텍스트가 기본 시스템 폰트로 표시되다가, 웹폰트가 로드되면 해당 폰트로 교체되는 과정에서 발생하는 것입니다.

2. FOUT(Flash of Unstyled Text): FOUT는 웹폰트가 로드되기 전에 일시적으로 기본 시스템 폰트로 텍스트를 표시하는 것을 의미합니다. 웹폰트가 로드되면 해당 폰트로 텍스트가 교체됩니다. FOUT는 FOIT와 달리, 로드되기 전에 텍스트를 표시하여 사용자가 폰트 교체를 인지할 수 있습니다.

3. FOFT(Flash of Faux Text): FOFT는 웹폰트 로딩 시간 동안 사용자에게 대체 폰트로 텍스트를 표시하는 것을 말합니다. 대체 폰트는 로드되지 않은 웹폰트와 유사한 스타일을 가지고 있어 사용자에게 일관성 있는 경험을 제공합니다. 웹폰트가 로드되면 해당 폰트로 텍스트가 교체됩니다. FOFT는 FOIT보다 덜 인지되는 텍스트 교체를 가지고 있습니다.

FOIT는 사용자 경험을 저해할 수 있으며, 특히 느린 네트워크 연결이나 큰 용량의 웹폰트 파일을 사용할 때 발생할 가능성이 높습니다.
FOIT의 대안으로는 FOUT(Flash of Unstyled Text)와 FOFT(Flash of Faux Text)가 있습니다:

사용 예시

font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;