폰트 깜빡임 - Font Preload

문제 발생

GNB에 마우스 커서를 올렸을 때 LNB가 나타나는데,
이 때 기본 폰트가 보였다가 설정한 웹폰트로 변하게 됩니다.

원인

브라우저의 렌더링 프로세스는 아래와 같습니다.

1. HTML 파싱, DOM 생성
2. CSS 파싱, CSSOM 생성
3. 렌더 트리 생성
4. Reflow (레이아웃 계산)
5. 페인팅

LNB는 display:none으로 되어 있어 렌더 트리에 포함되지 않아
LNB가 보이는 상태가 되어서야 웹폰트를 로딩하게 됩니다.

그런데 사용하고자 하는 웹폰트는 확장자가 OTF로,
이는 폰트 로딩 순서 중에서 가장 느린 확장자이며
실제로 로드까지 100ms 이상의 시간이 걸리는 것을 확인했습니다.

폰트 로딩 순서
woff2 > woff > ttf > eot > svg

해결

저는 이 문제를 rel="preload"를 link 태그 안에 넣어주어
웹폰트가 HTML 파싱중에 로드되도록 하여 해결했습니다🙂

// 변경 전
<link href="/font.otf" as="font" type="font/otf" crossorigin />

// 변경 후
<link rel="preload" href="/font.otf" as="font" type="font/otf" crossorigin />

이 외에도 최적화를 위해
다른 폰트 확장자를 사용하거나,
@font-face의 font-display 옵션으로 웹폰트 로딩동안 콘텐츠를 어떻게 보여줄 것인지(FOIT, FOUT)
여러 방법을 사용해 볼 수 있습니다.