웹 폰트 로딩과 레이아웃 흔들림 줄이기

폰트가 늦게 도착하면 두 가지 문제가 생긴다

웹 폰트가 아직 도착하지 않았을 때 브라우저가 텍스트를 보여주지 않고 기다리면, 방문자는 한동안 빈 화면을 보게 됩니다. 반대로 대체 폰트로 먼저 글자를 보여주고 나중에 지정한 폰트로 바꾸면, 글자 크기와 자간이 달라지면서 줄바꿈 위치와 레이아웃이 움직일 수 있습니다. 둘 다 본문이 많은 사이트에서는 체감 품질에 영향을 줍니다.

font-display로 우선순위를 정한다

font-display 속성은 폰트가 로딩되는 동안 텍스트를 어떻게 보여줄지 정합니다. swap은 대체 폰트로 즉시 보여주고 폰트가 도착하면 교체하며, optional은 빠르게 도착하지 않으면 교체를 포기합니다. 본문 텍스트는 내용을 먼저 전달하는 것이 중요하므로 swap을 사용하는 경우가 많고, 장식적인 폰트는 optional로 두어도 무리가 없습니다.

외부 CDN 폰트는 추가 요청을 만든다

스타일시트에서 외부 폰트 CDN을 @import로 불러오면, 브라우저는 먼저 스타일시트를 받고 그 안에서 다시 폰트 파일을 요청합니다. 이 과정에서 왕복이 한 번 더 생기므로, 폰트 호스팅 방식을 바꾸거나 preconnect를 함께 쓰는 선택지를 검토할 수 있습니다. CloudPlare도 Pretendard 가변 폰트를 외부 CDN에서 불러오고 있어, 폰트 요청이 본문 렌더링을 늦추지 않는지 주기적으로 확인합니다.

폰트가 늦게 도착해도 읽기에 문제가 없도록, 시스템 폰트로 구성된 대체 폰트 스택을 함께 지정해두는 것이 좋습니다. 대체 폰트와 지정 폰트의 글자 너비가 비슷할수록 교체 시 레이아웃 흔들림이 줄어듭니다.