웹 폰트가 아직 도착하지 않았을 때도 독자는 문장을 만난다. `font-display`는 다운로드를 기다리는 동안 글자를 어떻게 표시하고 언제 교체할지 정한다. [[웹 폰트]]의 최종 모양과 로딩 중의 모양을 함께 다루는 문제다.
- `swap`은 아주 짧은 대기 뒤 대체 글자체를 쓰고, 폰트가 준비되면 교체한다. 두 글자체의 폭이 다르면 줄바꿈도 달라질 수 있다.
- `optional`은 짧은 대기 뒤 이번 방문에서 웹 폰트를 쓰지 않을 수도 있다. 항상 지정한 글자체로 바뀐다는 약속이 아니다.
- `font-family`에는 대체할 글자체와 일반 계열을 둔다. 불러오는 파일이 한글을 포함하지 않으면 한 문장에서도 글자체가 섞일 수 있다.
- 실제 파일의 굵기를 선언한다. 보통 굵기 파일 하나를 여러 굵기인 것처럼 선언하지 않는다.
## 작은 예제
아래 코드를 UTF-8 형식의 `example-07.html`로 저장해 웹 브라우저에서 연다. 웹 배포가 허용된 보통 굵기 WOFF2 파일을 `exhibition-regular.woff2`로 같은 폴더에 둔다. 파일이 없으면 대체 글자체로 표시된다.
```html
폰트를 기다리는 문장
폰트를 기다리는 문장
전시장 밖에서 다시 읽는 문장. A room of words.
전시장 밖에서 다시 읽는 문장. A room of words.
```
첫 문장은 웹 폰트를 요청하고 둘째는 대체 글자체를 쓴다. 캐시를 비우고 느린 네트워크와 파일 요청 실패를 각각 확인한다. 글이 사라지는 시간과 줄바꿈의 변화를 구분해 살핀다. [[글줄의 길이와 줄 높이]]를 바꿀 때는 로딩 이후만 보지 않는다. [[대체 글자체의 치수 맞추기]]는 교체 전후의 차이를 줄이는 다음 주제다.
## 참고
- [MDN: font-display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/font-display)
- [MDN: @font-face](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face)
#CSS #타이포그래피