웹 폰트가 아직 도착하지 않았을 때도 독자는 문장을 만난다. font-display는 다운로드를 기다리는 동안 글자를 어떻게 표시하고 언제 교체할지 정한다. 웹 폰트의 최종 모양과 로딩 중의 모양을 함께 다루는 문제다.
swap은 아주 짧은 대기 뒤 대체 글자체를 쓰고, 폰트가 준비되면 교체한다. 두 글자체의 폭이 다르면 줄바꿈도 달라질 수 있다.optional은 짧은 대기 뒤 이번 방문에서 웹 폰트를 쓰지 않을 수도 있다. 항상 지정한 글자체로 바뀐다는 약속이 아니다.font-family에는 대체할 글자체와 일반 계열을 둔다. 불러오는 파일이 한글을 포함하지 않으면 한 문장에서도 글자체가 섞일 수 있다.- 실제 파일의 굵기를 선언한다. 보통 굵기 파일 하나를 여러 굵기인 것처럼 선언하지 않는다.
작은 예제
아래 코드를 UTF-8 형식의 example-07.html로 저장해 웹 브라우저에서 연다. 웹 배포가 허용된 보통 굵기 WOFF2 파일을 exhibition-regular.woff2로 같은 폴더에 둔다. 파일이 없으면 대체 글자체로 표시된다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>폰트를 기다리는 문장</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font-family: sans-serif;
line-height: 1.6; color: #222; background: #fff; }
main { max-inline-size: 60rem; margin-inline: auto; }
h1 { font-size: 1.7rem; line-height: 1.3; }
a { color: #174fa0; }
:focus-visible { outline: 3px solid #174fa0; outline-offset: 3px; }
@font-face {
font-family: "Exhibition";
src: url("exhibition-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
.sample { font-family: "Exhibition", sans-serif;
font-weight: 400; font-size: 1.5rem; line-height: 1.6; }
.fallback { font-family: sans-serif; }
</style>
</head>
<body>
<main>
<h1>폰트를 기다리는 문장</h1>
<p class="sample">전시장 밖에서 다시 읽는 문장. A room of words.</p>
<p class="sample fallback">전시장 밖에서 다시 읽는 문장. A room of words.</p>
</main>
</body>
</html>첫 문장은 웹 폰트를 요청하고 둘째는 대체 글자체를 쓴다. 캐시를 비우고 느린 네트워크와 파일 요청 실패를 각각 확인한다. 글이 사라지는 시간과 줄바꿈의 변화를 구분해 살핀다. 글줄의 길이와 줄 높이를 바꿀 때는 로딩 이후만 보지 않는다. 대체 글자체의 치수 맞추기는 교체 전후의 차이를 줄이는 다음 주제다.