font-display로 글꼴 성능 제어

롭 닷슨

웹 글꼴이 로드되는 동안 동작을 결정하는 것은 중요한 성능 조정 기법이 될 수 있습니다. @font-face의 새로운 글꼴 디스플레이 설명어를 사용하면 개발자가 로드하는 데 걸리는 시간에 따라 웹 글꼴이 렌더링 (또는 대체)되는 방식을 결정할 수 있습니다.

현재 글꼴 렌더링의 차이점

웹 글꼴을 사용하면 개발자가 프로젝트에 풍부한 서체를 통합할 수 있지만, 사용자가 아직 서체를 가지고 있지 않은 경우 브라우저에서 글꼴을 다운로드하는 데 시간을 소비해야 한다는 단점이 있습니다. 네트워크는 불안정할 수 있기 때문에 이러한 다운로드 시간은 사용자 환경에 부정적인 영향을 미칠 수 있습니다. 텍스트를 표시하는 데 시간이 너무 오래 걸린다면 텍스트가 아무리 예쁘다는 사실은 아무도 신경 쓰지 않을 것입니다.

느린 글꼴 다운로드의 위험을 완화하기 위해 대부분의 브라우저는 제한 시간을 구현하고 그 후에 대체 글꼴을 사용합니다. 이는 유용한 기법이지만 안타깝게도 브라우저는 실제 구현과 다릅니다.

탐색자 시간 초과 대체 바꾸기
Chrome 35 이상 3초 지원됨 지원됨
Opera 3초 지원됨 지원됨
Firefox 3초 지원됨 지원됨
Internet Explorer 0초 지원됨 지원됨
Safari 제한 시간 없음 N/A N/A
  • Chrome 및 Firefox에는 텍스트가 대체 글꼴로 표시된 후 3초의 제한 시간이 있습니다. 글꼴이 다운로드되면 결국 전환이 발생하고 텍스트가 원하는 글꼴로 다시 렌더링됩니다.
  • Internet Explorer는 시간 제한이 0초이므로 텍스트가 즉시 렌더링됩니다. 요청된 글꼴을 아직 사용할 수 없는 경우 대체가 사용되며, 나중에 요청된 글꼴을 사용할 수 있게 되면 텍스트가 다시 렌더링됩니다.
  • Safari에는 시간 제한 동작이 없습니다 (또는 기준 네트워크 제한 시간을 벗어나는 동작도 없음).

더 심각한 문제는 개발자가 이러한 규칙이 애플리케이션에 미치는 영향을 결정하는 데 제한이 있다는 것입니다. 성능을 중시하는 개발자는 대체 글꼴을 사용하는 더 빠른 초기 환경을 선호하고 다운로드할 기회를 얻은 다음 후속 방문에서만 더 멋진 웹 글꼴을 활용하고자 할 수 있습니다. Font Loading API와 같은 도구를 사용하면 일부 기본 브라우저 동작을 재정의하여 성능을 개선할 수 있지만, 적지 않은 양의 자바스크립트를 작성한 후 페이지에 인라인으로 추가하거나 외부 파일에서 요청해야 하므로 추가 HTTP 지연 시간이 발생합니다.

이 문제를 해결하기 위해 CSS Working Group은 새로운 @font-face 설명자, font-display, 그리고 다운로드 가능한 글꼴이 완전히 로드되기 전에 렌더링되는 방식을 제어하는 관련 속성을 제안했습니다.

글꼴 다운로드 타임라인

현재 일부 브라우저에서 구현하는 기존 글꼴 시간 제한 동작과 마찬가지로 font-display는 글꼴 다운로드의 전체 기간을 세 가지 주요 기간으로 분류합니다.

  1. 첫 번째 기간은 글꼴 차단 기간입니다. 이 기간에 글꼴이 로드되지 않으면 글꼴 사용을 시도하는 모든 요소가 표시되지 않는 대체 글꼴로 렌더링해야 합니다. 차단 기간에 글꼴이 성공적으로 로드되면 글꼴이 정상적으로 사용됩니다.
  2. 글꼴 전환 기간은 글꼴 차단 기간 직후에 발생합니다. 이 기간에 글꼴이 로드되지 않으면 글꼴 사용을 시도하는 모든 요소가 대체 글꼴로 렌더링해야 합니다. 스왑 기간에 글꼴이 성공적으로 로드되면 글꼴이 정상적으로 사용됩니다.
  3. 글꼴 실패 기간은 글꼴 스왑 기간 직후에 발생합니다. 이 기간이 시작될 때 글꼴이 아직 로드되지 않은 경우 로드 실패로 표시되어 일반 글꼴 대체가 발생합니다. 그렇지 않으면 글꼴이 정상적으로 사용됩니다.

이러한 기간을 이해하면 font-display를 사용하여 다운로드 여부 또는 시점에 따라 글꼴 렌더링 방법을 결정할 수 있습니다.

나에게 적합한 글꼴 디스플레이는 무엇인가요?

font-display 설명자를 사용하려면 @font-face at 규칙에 추가합니다.

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

font-display은(는) 현재 다음 auto | block | swap | fallback | optional 값의 범위를 지원합니다.

자동

auto는 사용자 에이전트가 사용하는 글꼴 표시 전략을 사용합니다. 대부분의 브라우저에는 현재 차단과 유사한 기본 전략이 있습니다.

블록

block은 글꼴에 짧은 차단 기간 (대부분의 경우 3초가 권장됨)과 무한 스왑 기간을 제공합니다. 즉, 글꼴이 로드되지 않으면 브라우저는 처음에 '보이지 않는' 텍스트를 표시하지만 로드되는 즉시 글꼴로 전환합니다. 이를 위해 브라우저는 선택한 글꼴과 비슷하지만 모든 글리프에 '잉크'가 포함되지 않은 익명의 글꼴을 생성합니다. 이 값은 페이지를 사용하기 위해 특정 서체로 텍스트를 렌더링해야 하는 경우에만 사용해야 합니다.

스왑

swap은 글꼴에 0초의 차단 기간과 무한 스왑 기간을 제공합니다. 즉, 글꼴이 로드되지 않으면 브라우저에서 대체를 통해 즉시 텍스트를 그리지만 로드되는 즉시 글꼴로 전환합니다. 블록과 마찬가지로 이 값은 페이지에 특정 글꼴로 텍스트를 렌더링하는 것이 중요할 때만 사용해야 하지만 어떤 글꼴로 렌더링하더라도 여전히 올바른 메시지를 받게 됩니다. 적절한 대체를 사용하여 회사 이름을 표시하면 메시지가 전달되지만 결국에는 공식 서체를 사용하게 되므로 로고 텍스트는 교체에 적합한 후보입니다.

대체

대체는 글꼴에 매우 짧은 차단 기간 (대부분의 경우 100ms 이하 권장)과 짧은 스왑 기간 (대부분의 경우 3초가 권장됨)을 제공합니다. 즉, 글꼴이 로드되지 않으면 처음에는 대체로 렌더링되지만 로드되는 즉시 글꼴이 전환됩니다. 그러나 시간이 너무 오래 지나면 페이지의 남은 전체 기간 동안 대체가 사용됩니다. 대체는 사용자가 가능한 한 빨리 읽기를 시작하길 원하고 새 글꼴이 로드될 때 텍스트를 이동함으로써 사용자 환경을 방해하지 않기를 원하는 본문 텍스트 등의 항목에 사용하기 좋습니다.

선택 사항

선택사항은 글꼴에 매우 짧은 차단 기간 (대부분의 경우 100ms 이하 권장)과 0초 스왑 기간을 제공합니다. 대체와 마찬가지로 이는 글꼴 다운로드 기능이 '있으면 좋지만' 환경에는 중요하지 않은 경우에 적합합니다. 선택사항 값은 글꼴 다운로드를 시작할지 여부를 브라우저에 맡기고, 사용자에게 가장 적합하다고 판단되는 항목에 따라 다운로드하지 않거나 낮은 우선순위로 실행할 수 있습니다. 이는 사용자의 연결 상태가 좋지 않고 글꼴을 아래로 내리면 리소스를 가장 잘 활용하는 방법이 아닐 수 있는 상황에서 유용할 수 있습니다.

브라우저 지원

font-display는 현재 데스크톱 Chrome 49의 실험용 웹 플랫폼 기능 플래그 뒤에 있으며 Android용 Opera 및 Opera에서도 제공됩니다.

데모

샘플을 확인하여 font-display를 사용해 보세요. 성능을 중시하는 개발자의 경우 이 도구가 도구 모음에서 하나의 더 유용한 도구가 될 수 있습니다