Font를 다운 받기 전 글자를 나타내는 방식 설정법 - font-display

브라우저가 글자를 그리려면 CSS에서 설정한 font를 다운받아야 한다.

그러나 브라우저는 font를 다운 받기 이전에 DOM과 CSSOM을 이용해서 페이지를 그리기 시작하고

font를 다운 받지 못한 짧은 시간 동안 기본으로 설정한 시스템 폰트가 적용된다.

그리고서 font 다운이 완료되면 스타일이 적용된 font를 다시 그리게 된다.

이는 경우에 따라서 사용자에게 불편함을 줄 수 있다.

잠시 동안 달라진 font로 하여금 읽던 글자의 위치가 달라지는 등의 변화가 발생할 수 있기 때문이다.

영어권에서는 이러한 현상을 Flash of Unstyled Text라 하는가 보다.

 

이를 방지하기 위해서 CSS의 font-display 설정을 바꿀 수 있다.

 

@font-face {
  font-family: "opensans";
  src: url("fonts/opensans-regular-webfont.woff2") format("woff2"),
    url("fonts/opensans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: optional;
}

 

위는 font-family로 글꼴을 바꿀 수 있도록 font 파일을 불러오는 CSS 코드다.

제일 아래의 font-display를 주목하자.

이 설정에 따라서 url을 통해 다운받는 font를 다운받고 나서 어떻게 적용할 것인지를 결정한다.

 

font-display에 auto를 넣으면 기본값으로 브라우저마다 다르게 작동한다. (쓰지 말자)

swap은 기본 폰트로 그려놓고 font 다운이 완료됐을 때 바꿔준다.

fallback은 크롬의 auto 값으로 짧은 시간 동안 font 다운을 완료하지 못한다면 기본 폰트를 그대로 둔다.

block은 font를 다운 받을 동안 글자를 표시하지 않는다. (쓰면 안 된다)

optional은 fallback과 동일하나 font를 늦게 다운 받아 적용하지 않았다고 해도 캐시에 저장해 다음 로딩시에는 캐시에 저장된 폰트로 글자를 그린다. (추천)

 

그밖에도 Flash of Unstyled Text의 시간을 줄이기 위해서 압축된 폰트를 사용하는 방법과 특수 문자 같은 필요 없는 글자들을 뺀 폰트를 사용하는 방법이 있다.