font-display 속성의 이해

font-display 속성은 @font-face 규칙으로 지정한
글꼴의 로드 여부와 시기에 따라 글꼴의 표시 방식을 결정합니다.

이 속성은 웹 페이지의 내용과 목적, 디자인을 고려하여
사용자 정의로 호스팅된 글꼴의 로드 상황에 맞춰 필요한 옵션을 선택할 수 있어 유용합니다.

알아두세요!
@font-face 규칙을 사용하여 웹 페이지에 사용자 정의 글꼴을 적용한 글꼴을 일반적으로 '웹 폰트'라고 부릅니다.
웹 폰트는 사용자 디바이스에 설치된 글꼴(일반적으로 '시스템 폰트')이 아닌, 웹사이트에서 제공하는 글꼴 파일을 불러와 브라우저가 렌더링할 수 있도록 고안된 폰트로 다른 폰트와 구별해서 사용하는 용어입니다.
font-display 속성은 '시스템 폰트'가 아닌 '웹 폰트'에만 적용됩니다.

CSS 
/* @font-face 규칙으로
   스타일시트에 적용할 사용자 정의 글꼴을 지정 */
@font-face {
    font-family: "Nanum Gothic";
    src: local("Nanum Gothic"), /* 사용자 디바이스에 설치된 글꼴 */
         url("fonts/NanumBarunGothic.woff2") format("woff2"); /* 호스팅된 글꼴 */
    font-display: swap; /* 글꼴의 로드 여부와 시기에 따라 글꼴의 표시 방식을 결정: swap */
}

/* 위에서 정의한 "Nanum Gothic" 글꼴을 body 태그에 적용합니다.
   만약 'Nanum Gothic' 글꼴이 로드되지 않으면 sans-serif 계열의 폰트로 대체합니다. */
body {
    font-family: "Nanum Gothic", sans-serif;
}

이 속성은 @font-face규칙에서만 사용할 수 있는 설명자(descriptor)입니다. 선택자의 속성으로는 사용할 수 없습니다.

CSS 
selector {
    font-family: "Nanum Gothic";
    font-display: swap; /* 선택자의 속성으로는 사용할 수 없습니다. */
}

구문

CSS 
/* 키워드 값 */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;

형식 정의

font-display 속성의 형식 정의
초깃값 auto
적용 @ 규칙 @font-face

값

font-display 속성의 값
auto 초깃값입니다.
브라우저의 정책에 의해서 로딩 전략을 결정합니다.
block
  1. 글꼴이 로드되지 않은 경우 처음에는 "보이지 않는" 텍스트를 그립니다.
  2. 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다. 이때 사용자는 텍스트가 깜빡이며 보이는 현상을 경험할 수 있습니다.
  3. 만약 짧은 기간(명세서에 따르면 약 3 초) 동안 글꼴이 로드되지 않으면, 브라우저는 해당 글꼴을 대신해서 사용자 디바이스에 설치되어 있는 대체 글꼴로 표시합니다.
  4. 나중에라도 언제든지 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다.
swap
  1. 글꼴이 로드되지 않은 경우 처음에는 "보이지 않는" 텍스트를 그립니다.
  2. 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다. 이때 사용자는 텍스트가 깜빡이며 보이는 현상을 경험할 수 있습니다.
  3. 만약 매우 짧은 기간(명세서에 따르면 약 0.1 초 ) 동안 글꼴이 로드되지 않으면, 브라우저는 해당 글꼴을 대신해서 사용자 디바이스에 설치되어 있는 대체 글꼴로 표시합니다.
  4. 나중에라도 언제든지 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다.
fallback
  1. 글꼴이 로드되지 않은 경우 처음에는 "보이지 않는" 텍스트를 그립니다.
  2. 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다. 이때 사용자는 텍스트가 깜빡이며 보이는 현상을 경험할 수 있습니다.
  3. 만약 매우 짧은 기간(명세서에 따르면 약 0.1 초) 동안 글꼴이 로드되지 않으면, 브라우저는 해당 글꼴을 대신해서 사용자 디바이스에 설치되어 있는 대체 글꼴로 표시합니다.
  4. 명세서에 따르면 처음 약 3 초 동안에는 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다.
  5. 하지만, 그 이후에는 브라우저는 해당 글꼴의 표시를 포기하고 사용자 디바이스에 설치되어 있는 대체 글꼴만로 표시합니다.
optional
  1. 글꼴이 로드되지 않은 경우 처음에는 "보이지 않는" 텍스트를 그립니다.
  2. 글꼴이 로드되는 즉시 해당 글꼴로 교체하여 텍스트를 표시합니다. 이때 사용자는 텍스트가 깜빡이며 보이는 현상을 경험할 수 있습니다.
  3. 만약 매우 짧은 기간(명세서에 따르면 약 0.1 초) 동안 글꼴이 로드되지 않으면, 브라우저는 해당 글꼴의 표시를 포기하고 사용자 디바이스에 설치되어 있는 대체 글꼴로 표시합니다. 나중에 글꼴이 로드되더라도 해당 로드된 글꼴로의 교체는 허용하지 않습니다.

위 값에 대한 설명해서 사용한 기간이나 시간은 브라우저가 다운로드한 글꼴을 사용하려고 시도하는 순간부터 시작되는 타이머를 기반으로 합니다.

참고사항

font-display 속성의 일부 값은 사용에 대한 고려해야 할 점이 있습니다.

block

사용자의 인터넷 환경 등으로 인해 글꼴이 로드되지 않은 경우나, 매우 늦게 로드되면 약 3 초 동안에는 "보이지 않는" 텍스트를 그립니다. 즉, 화면에 텍스트가 보이지 않게 됩니다.

이로 인해 큰 텍스트에서 사용자는 글꼴이 교체될 때까지 빈 공간이 생겨 혼란을 느낄 수 있습니다.

swap

이 값은 빠른 로딩을 원할 때 유용하지만, 사용자가 깜빡임 현상을 경험할 확률이 높습니다.

fallback

이 값은 긴 텍스트 또는 중요 정보를 표시할 때 유용합니다.

fallback 값은 swap과 비슷하지만, 약 3초 이후에도 글꼴이 늦게 로드되면 사용자는 중간에 깜빡거리는 현상을 경험하지 않습니다. 계속해서 대체 글꼴로 표시되기 때문입니다. 사용자가 텍스트를 읽기 시작한 후에 새로운 글꼴로 바뀌는 것이 방해가 되어서는 안 됩니다. 글꼴이 있던 위치를 다시 찾는 것은 산만하고 불편하기 때문입니다.

optional

이 값은 글꼴이 로드되는 시간을 매우 빠르게 판단하여 사용할 수 없으면 대체 글꼴로 계속해서 표시하기 때문에 사용자가 모든 것이 완벽하게 즉시 보일 때까지 더 오랜 시간을 기다리는 것보다 첫 방문 시 웹 페이지가 빠르게 렌더링되는 것이 더 중요할 때 유용하게 사용할 수 있습니다.

추가적인 사용 팁

font-display 속성에서 호스팅된 글꼴이 로드되는 시간은 웹 페이지의 내용, 목적, 디자인을 고려할 만큼 매우 중요할 수 있습니다. 이를 최적화하기 위해 <link rel="preload">를 활용하는 것을 고려할 수 있습니다.

부연설명
<link> 태그의 rel="preload"는
브라우저에게 href 속성으로 지정한 리소스를 로드 순서대로 기다리지 않고 우선순위로 즉시 다운로드 및 캐싱하도록 설정합니다.
<head> 태그 내에 사용되며, 주로 우선적으로 다운로드해야 할 웹폰트, 이미지, CSS 파일 등의 리소스에 활용됩니다.

<link rel="preload"> 사용하기

HTML 
<head>
    ...
    <link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    ...
</head>

위의 예시처럼 <link rel="preload">를 사용하면 웹 페이지가 필요한 리소스를 미리 로드하여 렌더링 성능을 개선할 수 있습니다. 특히 글꼴 로딩에 있어 이러한 방법은 사용자 경험을 향상시키는 데 도움이 됩니다.

적절한 글꼴 선택

페이지에서 주로 사용될 글꼴을 미리 로드하세요. 이는 중요한 텍스트가 사용자에게 표시될 때 즉시 렌더링되는 것을 도와줍니다.

리소스 유형 지정

as 속성을 사용하여 로드할 리소스의 유형을 명시하세요. 글꼴의 경우 as="font"를 사용하면 됩니다.

type="font/woff2"와 같이 type속성을 사용해서 리소스의 MIME 타입을 명시적 지정하면 브라우저는 해당 리소스를 지원할 때에만 작업을 수행합니다. 이는 브라우저가 리소스를 올바르게 해석하고 적절히 처리할 수 있도록 도와줍니다.

하지만, 명시적인 MIME 타입을 지정하지 않아도 됩니다.
대부분의 경우 브라우저는 자동으로 리소스의 MIME 타입을 감지하고 처리합니다. 특히 최신 브라우저들은 이를 매우 잘 처리하므로 명시적으로 type 속성을 생략해도 됩니다.

crossorigin

CORS 요청을 위한 설정입니다. 외부 출처의 리소스를 로드할 때 사용합니다.

프로토콜과 도메인이 일치해야 '동일 출처'라고 합니다. 포트가 명시된 경우에는 포트도 일치해야 합니다. '외부 출처'란 '동일 출처'가 아닌 것을 말합니다.

crossorigin 속성은
해당 요소에 링크된 외부 출처의 리소스와 현재 웹 페이와의 상호작용을 할 수 있도록
교차 출처 리소소 공유(CORS, Cross-Origin Resource Sharing) 체계에서 처리하는 설정 방법을 지정하는 속성입니다.

일반적인 리소스와 달리, 웹 폰트는 CSS의 @font-face 규칙을 사용하여 웹 페이지에 로드됩니다. 이 삽입 과정에서 브라우저는 백그라운드에서 일부 CORS 요청을 트리거할 수 있습니다. 따라서 동일 출처의 웹 폰트 리소스를 <link> 태그의 rel="preload"로 설정하더라도 crossorigin 속성을 anonymous으로 사용하여 실제 폰트 로딩 간의 CORS 모드 일치를 보장하는 것이 좋습니다.

브라우저 호환성

font-display 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
font-display 60 79 58 11.1

명세서

font-display 속성의 명세서 사양
명세서 사양
font-display CSS Fonts Module Level 4
#font-display-desc

참고문헌

같이 보기