웹 글꼴이 로드될 때의 동작을 결정하는 것이 중요한 성능 조정 기법이 될 수 있습니다. @font-face의 새로운 font-display 설명자를 사용하면 개발자가 웹 글꼴을 로드하는 데 걸리는 시간에 따라 웹 글꼴을 렌더링하는 방법 (또는 대체)을 결정할 수 있습니다.
오늘날 글꼴 렌더링의 차이
웹 글꼴을 사용하면 개발자가 프로젝트에 풍부한 서체를 통합할 수 있지만, 사용자가 아직 서체를 보유하고 있지 않은 경우 브라우저에서 서체를 다운로드하는 데 시간이 걸린다는 단점이 있습니다. 네트워크가 불안정할 수 있으므로 이 다운로드 시간은 사용자 환경에 부정적인 영향을 미칠 수 있습니다. 결국 텍스트를 표시하는 데 시간이 너무 오래 걸리면 아무도 텍스트가 얼마나 예쁜지 신경 쓰지 않습니다.
글꼴 다운로드 속도가 느려질 수 있는 위험을 완화하기 위해 대부분의 브라우저는 제한시간을 구현하며, 이 제한시간이 지나면 대체 글꼴이 사용됩니다. 이는 유용한 기법이지만 안타깝게도 브라우저마다 실제 구현이 다릅니다.
| 브라우저 | 제한 시간 | 대체 | 전환 |
|---|---|---|---|
| Chrome 35 이상 | 3초 | 예 | 예 |
| Opera | 3초 | 예 | 예 |
| Firefox | 3초 | 예 | 예 |
| Internet Explorer | 0초 | 예 | 예 |
| Safari | 제한 시간 없음 | 해당 사항 없음 | 해당 사항 없음 |
- Chrome 및 Firefox는 텍스트가 폴백 글꼴로 표시된 후 3초간 제한시간이 있습니다. 글꼴이 다운로드되면, 결국에는 스왑이 발생하며, 텍스트가 의도한 글꼴로 다시 렌더링됩니다.
- Internet Explorer의 제한시간은 0초이며, 즉각적인 텍스트 렌더링을 발생시킵니다. 요청된 글꼴을 아직 이용할 수 없는 경우, 폴백이 사용되며 요청된 글꼴을 사용할 수 있게 되면 나중에 텍스트가 다시 렌더링됩니다.
- Safari에는 제한시간 동작이 없습니다 (또는 최소한 기준 네트워크 제한시간을 초과하는 동작 없음).
설상가상으로 개발자는 이러한 규칙이 애플리케이션에 미치는 영향을 제한적으로만 결정할 수 있습니다. 성능에 중점을 둔 개발자는 대체 글꼴을 사용하는 더 빠른 초기 환경을 제공하고, 다운로드할 기회가 있었던 후속 방문에서만 더 나은 웹 글꼴을 활용하는 것이 좋습니다. Font Loading API와 같은 도구를 사용하면 일부 기본 브라우저 동작을 재정의하고 성능을 향상시킬 수 있지만, 그 대신 상당한 양의 JavaScript를 작성해야 하며, 이를 페이지에 인라인 처리하거나 외부 파일에서 요청해야 하므로 HTTP 지연 시간이 추가로 발생합니다.
이 문제를 해결하기 위해 CSS Working Group은 다운로드 가능한 글꼴이 완전히 로드되기 전에 어떻게 렌더링되는지 제어하는 새로운 @font-face 설명자 font-display와 해당 속성을 제안했습니다.
글꼴 다운로드 타임라인
일부 브라우저가 오늘날 구현하는 기존 글꼴 제한시간 동작과 유사하게 font-display는 글꼴 다운로드 수명을 세 개의 주요 기간으로 구분합니다.
- 첫 번째 기간은 글꼴 차단 기간입니다. 이 기간에 글꼴이 로드되지 않으면 글꼴 사용을 시도하는 모든 요소가 대신 보이지 않는 폴백 글꼴로 렌더링해야 합니다. 차단 기간에 글꼴이 성공적으로 로드되면 글꼴이 정상적으로 사용됩니다.
- 글꼴 스왑 기간은 글꼴 차단 기간 직후에 발생합니다. 이 기간에는 글꼴이 로드되지 않으면 사용을 시도하는 모든 요소가 대신 폴백 글꼴로 렌더링해야 합니다. 스왑 기간에 글꼴이 성공적으로 로드되면 글꼴이 정상적으로 사용됩니다.
- 글꼴 실패 기간은 글꼴 스왑 기간 직후에 발생합니다. 이 기간이 시작할 때 글꼴이 아직 로드되지 않았다면 실패한 로드로 표시되어 정상 글꼴 폴백을 일으킵니다. 그렇지 않으면 글꼴이 정상적으로 사용됩니다.
이러한 기간을 이해하면 font-display를 이용하여 글꼴의 다운로드 여부와 시점에 따라 글꼴을 렌더링하는 방법을 결정할 수 있습니다.
어떤 font-display가 적합할까요?
font-display 설명자를 사용하려면 @font-face at-rule에 추가합니다.
@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초의 차단 기간과 무한 스왑 기간을 부여합니다. 즉, 글꼴이 로드되지 않으면 브라우저는 바로 폴백으로 텍스트를 그리지만, 로드되는 즉시 글꼴로 스왑합니다. block과 유사하게 이 값은 텍스트를 특정 글꼴로 렌더링하는 것이 페이지에 중요하지만, 다른 글꼴로 렌더링하더라도 여전히 올바른 메시지를 전달할 수 있는 경우에만 사용해야 합니다. 적절한 대체 값을 사용하여 회사 이름을 표시하면 메시지를 전달할 수 있지만 결국 공식 글꼴을 사용하게 되므로 로고 텍스트는 스왑에 적합한 후보입니다.
대체
fallback은 글꼴에 극도로 짧은 차단 기간 (대부분의 경우 100ms 미만이 권장됨)과 짧은 스왑 기간 (대부분의 경우 3초 권장)을 제공합니다. 다시 말해 글꼴이 로드되지 않으면 처음에 폴백으로 렌더링되지만 로드되는 즉시 글꼴이 스왑됩니다. 그러나 시간이 너무 지나면 페이지의 나머지 기간 동안 대체 값이 사용됩니다. 대체 값은 사용자가 최대한 빨리 읽기 시작해야 하고 새 글꼴이 로드될 때 텍스트가 변경되어 사용자 환경을 방해하는 것을 원치 않는 본문과 같은 곳에 적합한 후보입니다.
선택사항
선택사항: 글꼴에 극도로 짧은 차단 기간 (대부분의 경우 100ms 미만이 권장됨)과 0초의 스왑 기간을 제공합니다. fallback과 마찬가지로, 이 값은 글꼴 다운로드가 '있으면 좋지만' 환경에 중요하지 않은 경우에 적합합니다. 선택사항 값은 글꼴 다운로드 개시 여부를 브라우저가 결정하도록 하며, 브라우저는 사용자에게 가장 적합하다고 생각하는 것에 따라 다운로드하지 않거나 낮은 우선순위로 다운로드할 수 있습니다. 이 방식은 사용자의 연결이 약하고 글꼴을 표시하는 것이 가장 적합한 리소스 사용 방법이 아닌 상황에서 도움이 됩니다.
브라우저 지원
font-display는 현재 데스크톱 Chrome 49의 실험용 웹 플랫폼 기능 플래그 뒤에 있으며 Android용 Opera 및 Opera에서 제공됩니다.
데모
샘플을 확인하여 font-display을 사용해 보세요. 성능에 중점을 둔 개발자에게는 도구 모음에 유용한 도구가 하나 더 추가될 수 있습니다.