[CSS] font-display 이란?

font-display 속성이란?

웹 폰트를 로드 할 때 사용 하는 CSS 속성이다.

사이트를 들어 갈 때, 웹 폰트 렌더링 속도가 느려 글자가 안보였다 나타나거나, 기본 폰트에서 바뀌는 경우를 본 적 있을 것이다.

그러한 경우에 웹 폰트의 로딩 동작을 제어하여 사용자 경험을 개선 할 수 있게 해준다.

폰트 로딩 동안 빈 텍스트나 다른 대체 폰트로 표기 할 수 있기 때문이다.

주로 사용 되는 경우

1. 로딩 지연을 최소화 할 때

웹 폰트 중 일부는 다운로드 시간이 많이 걸려 느리게 출력 되는 문제

2. FOIT (Flash of Invisible Text) 를 해결 해야 할 때

FOIT는 브라우저에서 웹 폰트가 다운로드 되지 않아 텍스트가 안 보이는 문제

FOUT (Flash of Unstyled Text) 를 해결해야 할 때

FOUT는 웹 폰트가 로드 되는 동안 기본 시스템 폰트에서 웹 폰트로 변경되는 과정에서 텍스트 스타일이 변경되는 문제

속성

속성 값	설명
auto	브라우저의 기본 동작을 따릅니다. 폰트가 다운로드될 때까지 기다리며, 다운로드가 완료되면 폰트를 사용하여 텍스트를 렌더링한다.
block	폰트 다운로드가 시작되기 전까지 텍스트를 표시하지 않는다. 폰트가 다운로드되면 해당 폰트를 사용하여 텍스트를 렌더링한다.
swap	폰트 다운로드가 시작되면 브라우저는 기본 시스템 폰트로 텍스트를 표시하고, 폰트가 다운로드되면 해당 폰트로 교체하여 텍스트를 렌더링한다.
fallback	폰트 다운로드가 시작되면 브라우저는 기본 시스템 폰트로 텍스트를 표시하고, 폰트가 다운로드되면 해당 폰트로 교체하여 텍스트를 렌더링한다. 이 설정은 FOIT 문제를 해결하기 위해 사용될 수 있다.
optional	폰트가 사용 가능한 경우에만 다운로드된다. 폰트 로딩에 영향을 주지 않고, 사용자의 운영 체제와 브라우저 설정에 따라 기본 시스템 폰트를 사용하여 텍스트를 렌더링한다.

사용 방법

@font-face {
  font-family: 'MyWebFont';
  src: url('my-web-font.woff2') format('woff2'),
       url('my-web-font.woff') format('woff');
  font-display: swap; /* 빈 텍스트가 표시되지 않도록 웹 폰트가 다운로드되는 동안 기본 폰트로 대체됩니다. */
}