font-display로 글꼴 성능 제어

Rob Dodson

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

현재 글꼴 렌더링의 차이점

웹 글꼴을 사용하면 개발자가 프로젝트에 풍부한 서체를 통합할 수 있으며, 단, 사용자가 아직 서체를 가지고 있지 않은 경우 브라우저에서 서체를 다운로드하는 데 시간이 소요된다는 단점이 있습니다. 네트워크가 불안정할 수 있으므로 다운로드 시간이 사용자 환경에 악영향을 미칠 가능성이 있습니다. 텍스트를 표시하는 데 너무 많은 시간이 걸린다면 텍스트가 얼마나 예쁜지 아무도 신경 쓰지 않을 것입니다.

글꼴 다운로드가 느려지는 위험을 일부 완화하기 위해 대부분의 브라우저에서는 시간 제한을 구현하고 그 후에는 대체 글꼴이 사용됩니다. 이 기법은 유용한 기법이지만 아쉽게도 브라우저가 실제 구현에는 차이가 있습니다.

• Chrome 및 Firefox에는 3초의 제한 시간이 있으며 그 후에는 텍스트가 대체 글꼴로 표시됩니다. 글꼴이 다운로드되면 최종적으로 전환이 발생하고 텍스트가 의도한 글꼴로 다시 렌더링됩니다.
• Internet Explorer의 제한 시간은 0초이므로 텍스트 렌더링이 즉시 실행됩니다. 요청된 글꼴을 아직 사용할 수 없는 경우 대체가 사용되며, 요청된 글꼴을 사용할 수 있게 되면 텍스트가 다시 렌더링됩니다.
• Safari에는 시간 제한 동작이 없거나 최소 기준 네트워크 시간 제한을 초과한 항목이 없습니다.

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

이 상황을 해결하기 위해 CSS 실무 그룹은 새로운 @font-face 설명자, font-display 및 다운로드 가능한 글꼴이 완전히 로드되기 전에 렌더링하는 방식을 제어하는 해당 속성을 제안했습니다.

글꼴 다운로드 타임라인

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

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

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

나에게 적합한 글꼴 표시는 무엇인가요?

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

@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과 유사한 기본 전략이 있습니다.

블록

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

스왑

스왑은 글꼴에 0초의 차단 기간과 무한 스왑 기간을 제공합니다. 즉, 글꼴이 로드되지 않으면 브라우저에서 즉시 대체를 사용하여 텍스트를 그리지만 로드되는 즉시 글꼴로 전환합니다. block과 마찬가지로 이 값은 텍스트를 특정 글꼴로 렌더링하는 것이 페이지에 중요하지만 모든 글꼴로 렌더링하면 여전히 올바른 메시지를 얻을 수 있는 경우에만 사용해야 합니다. 적절한 대체를 사용하여 회사 이름을 표시하면 메시지를 전달받지만 결국에는 공식 글꼴을 사용하게 되므로 로고 텍스트는 바꾸기에 좋은 방법입니다.

대체

fallback은 글꼴에 극도로 짧은 차단 기간 (대부분의 경우 100밀리초 이하가 권장됨)과 짧은 스왑 기간 (대부분의 경우 3초가 권장됨)을 제공합니다. 즉, 글꼴이 처음에 로드되지 않으면 대체로 렌더링되지만 로드되는 즉시 글꼴이 전환됩니다. 하지만 너무 많은 시간이 지나면 페이지의 나머지 기간 동안 대체가 사용됩니다. fallback은 본문 텍스트와 같이 사용자가 가능한 한 빨리 읽기를 시작하고 새 글꼴이 로드될 때 텍스트를 전환하여 사용 환경을 방해하지 않으려는 경우에 적합합니다.

선택사항

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

브라우저 지원

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

데모

샘플을 확인하여 font-display를 실행해 보세요. 성능에 관심이 많은 개발자에게는 도구 벨트에서 또 다른 유용한 도구가 될 수 있습니다.