웹 폰트 적용하기

나랭·2024년 10월 13일

웹 폰트 적용 방법 : CDN, OTF, WOFF

웹을 개발하면서 Pretendard 폰트를 적용할 때 처음에 다음의 방법을 사용했었다.

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

사실 패키지를 다운로드하는 방법보다 편하다고 생각해서 CDN 방식으로 폰트를 적용했는데 각 방법마다 단점이 있다는 것을 알게 되었다.

CDN 방식

폰트 파일이 업로드된 서버에서 바로 불러와 사용하는 방법

빠르게 폰트를 제공할 수 있으나 외부 서비스를 사용하는 것이므로 사용자의 인터넷 연결 상태에 의존하게 됨
CDN 서버가 다운되면 가져다 쓰고 있는 파일들도 모두 에러 발생

패키지 다운로드 방식

OTF : 로컬 파일을 직접 적용

실제 파일을 FTP에 업로드해서 사용하는 방법
웹용 폰트가 아니고 문서 작업용 파일이므로 웹과 어울리지 않음
폰트 파일을 다운로드 해야하므로 초기 로딩 시간이 늘어날 수 있음

WOFF : OTF, TTF를 웹용 폰트로 변환한 파일

OTF 처럼 로컬에 업로드해서 사용하는 방식
로컬 방식이므로 오류가 잘 나지 않고
웹용으로 처리된 파일이므로 다운로드하는데 짧은 시간이 소요됨

따라서 인터넷 연결 상태에 의존하지 않고 웹용으로 처리된 파일인 WOFF 파일을 다운로드해서 사용하는 방식으로 변경했다.

이때 폰트 적용에 대해 찾아보면서 font-display를 이용해 글꼴 렌더링 방식을 선택할 수 있다는 것도 알게 되었다!

font-display란?

글꼴 렌더링 방식

Flash of Invisible Text(FOIT) : 브라우저가 글꼴을 다운로드하기 전까지 글자를 보여주지 않음(글자가 늦게 나타남)
Flash of Unstyled Text(FOUT) : 브라우저가 글꼴을 다운로드 한 후 글꼴이 적용됨

font-display의 5가지 속성

auto : 브라우저의 기본 동작 적용
block : 폰트 다운로드 후에 글자 보여줌
swap : 시스템 폰트 적용 → 폰트 다운로드 후에 글꼴 적용
fallback : 100ms동안 글자 숨김 → 3초 이내에 글꼴 다운로드되면 글꼴 적용하고 그렇지 않으면 대체 글꼴을 사용

optional은 네트워크 상황에 따라 다르게 동작하므로 fallback 옵션을 사용하기로 결정!
optional : fallback과 유사하게 동작하지만 네트워크 상황에 따라 다르게 동작
- 네트워크 상황이 안좋으면 글꼴 다운로드를 하지 않고 시스템 글꼴 사용(이때 다운로드한 글꼴은 캐시에 저장하고 다음 방문부터 보여줌)

결론

인터넷 연결 상태에 의존하지 않도록 CDN -> WOFF 방식으로 변경하고

font-display에서 fallback 속성을 주어 사용자에게 글꼴 다운로드를 기다리지 않고 바로 텍스트 내용을 먼저 보여주도록 적용했습니다!

@font-face {
  font-family: "Pretendard Variable";
  font-display: fallback;
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
}