[CSS] font-display, 글꼴 렌더링 방식을 변경하는 방법

🙂 이번 시간에는 글꼴 랜더링 방식을 컨트롤 하는, font-display에 대해 알아보았다!

 

1. 글꼴 랜더링 방식

• 우리가 어떤 사이트에 들어갔을 때 글자가 늦게 나타나거나, 혹은 글꼴이 나중에 적용되는 경우를 볼 수 있다.

 

• 이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데, 설명은 아래와 같다.

방식	설명
Flash of Invisible Text (FOIT)	브라우저가 글꼴을 다운로드하기 전까지 글자를 보여주지 않음
Flash of Unstyled Text (FOUT)	브라우저가 글꼴을 다운로드하기 전까지 글꼴이 적용되지 않음

• 그런데 서비스 특성에 따라 글꼴 랜더링 방식을 변경할 순 없을까?
• font-display를 사용하면 가능하다 🙂

2. font-display란?

💡 font-display는 글꼴 다운로드 기간마다 글자를 어떻게 보여줄지 결정하는 CSS 속성이다.

1) 글꼴 다운로드 기간?

• 글꼴 다운로드 기간에는 아래 그림과 같이 차단, 교체, 오류 기간이 있다.

기간	설명
글꼴 차단 기간(block)	- 기간동안 글꼴이 로드되지 않은 경우, 해당 글꼴을 사용하는 글자를 숨긴다.(FOIT)  - 기간동안 글꼴이 로드된 경우, 로드된 글꼴을 사용한다.
글꼴 교체 기간(swap)	- 글꼴 차단 기간 직후의 기간이다.  - 기간동안 글꼴이 로드되지 않으면, 해당 글꼴을 사용하는 글자에 대체 글꼴을 적용한다.(FOUT)  - 기간동안 글꼴이 로드된 경우, 로드된 글꼴을 사용한다.
글꼴 오류 기간(failure)	- 글꼴 교체 기간 직후의 기간이다.  - 기간 동안 글꼴이 로드되지 않으면, 로드 실패로 간주되어 시스템 글꼴을 사용한다.

2) 사용법

• font-display 사용법은 간단한데, font-face에서 font-display를 정의하면 된다.

@font-face {
  font-family: 'Banana Font';
  font-style: normal;
  font-display: auto;  /* this! */
  src: local('Banana Font'),
       url('/fonts/banana-b.woff2') format('woff2');
}

3) 속성

🖐️ font-display에는 총 5가지 속성이 제공된다. 각각에 대해 자세히 알아보자!

(1) font-display: auto

• 브라우저의 기본 동작을 따른다. (block과 유사한 경우가 많음)

 

(2) font-display: block

• 글꼴이 다운로드되기 전까지 글자를 숨기다가, 글꼴이 로드되면 웹글꼴이 적용된다.
• 페이지에 글꼴이 중요한 경우, 이 값을 사용한다.

 

(3) font-display: SWAP

• 글꼴이 다운로드되기 전까지, 시스템 글꼴을 사용하다가 다운로드가 완료되면 웹 글꼴을 적용한다.

 

(4) font-display: FALLBACK

• 100ms 동안 글자를 숨기고, 3초 이내에 글꼴이 로드되면 웹 글꼴을 적용한다.
• 만약 3초(swap 기간) 동안 글꼴이 로드되지 않으면 대체 글꼴을 사용한다.

 

(5) font-display: OPTIONAL

• fallback과 유사하게 동작한다.
• 그러나 fallback과 다른 점은, 네트워크 상황에 따라 브라우저가 글꼴 다운로드 여부를 결정한다는 점이다.
• 시스템 글꼴을 유지할지 웹 글꼴을 적용할지 브라우저가 결정한다.
• 만약 네트워크 상황이 좋지 않으면, 브라우저는 로딩된 웹 폰트를 캐시에 저장하고 시스템 글꼴을 사용한다.
• 그리고 다음 방문시에 캐시된 웹 폰트를 적용한다.

 

• 그래서 이 속성값은 사용자의 네트워크 속도에 따라 웹 폰트를 사용할지 여부를 결정할 수 있다.

💡 예시로 보여준 코드는 아래 codepen에서 자세히 볼 수 있다.

See the Pen font-display by KumJungMin (@kumjungmin) on CodePen.

📌 이번 시간에는 웹 글꼴 렌더링 방식을 결정하는 font-display에 대해 알아보았다.
만약 서비스에서 글꼴이 중요한 경우에는 block을,
글꼴보다 내용이 중요하다면 swap, optional을 사용할 수 있다.
단, optional을 네트워크 상황에 따라 글꼴이 적용되지 않으므로 주의하자!