1️⃣ Font Preload란?
Font는 웹 폰트와 로컬 폰트가 있다. 로컬 폰트는 사용자의 기기에 이미 다운되어 있는 폰트를 사용하기 때문에 로딩 자체의 속도가 빠르지만, 만약 해당 폰트가 사용자의 기기에 없다면 대체 폰트를 사용하게 되어 페이지의 디자인이 깨질 수 있다는 단점이 있다. 또한 웹 폰트는 서버에서 제공되는 폰트 파일을 사용해 렌더링 하기 때문에 로딩 시간이 있다. 이러한 문제들 때문에 FOIT, FOUT 현상이 생긴다.
그래서 이 단점을 보완하기 위해 웹 폰트를 미리 로드하는 방법인 Font Preload을 사용한다. Font Prelaod는 폰트를 미리 다운로드하기 때문에 폰트 렌더링 과정이 없어져 페이지 로딩 속도가 빨라진다.
FOIT(Flash of Invisible Text)란?
웹 페이지에서 폰트가 로드되기 전까지 텍스트가 보이지 않는 현상
FOUT(Flash of Unstyled Text)란?
웹 페이지에서 폰트가 로드되기 전까지 폰트가 적용되지 않은 상태로 텍스트가 먼저 표시되는 현상
2️⃣ 폰트를 로컬 폰트가 있을 때 로딩하는 방법
로컬 폰트를 적용하기 위해서는 @font-face를 사용하면 된다.
@font-face {
font-family: <a-remote-font-name>;
src: <source> [,<source>]*;
[font-weight: <weight>]; // font 굵기 값
[font-style: <style>]; // font 스타일 값
}a-remote-font-name : font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.
source : 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
weight : 폰트의 굵기(font weight) 값.
style : 폰트 스타일(font style) 값.
3️⃣ 웹 폰트만 로딩해야하는 상황에서 최적화 기법
Preload를 이용
<link rel="preload" href="url" as="font" type="font/woff2" crossorigin>head 태그 안에 link의 preload 속성을 이용하여 폰트를 미리 로딩하여 앞에서 말한 FOUT, FOIT와 같은 문제를 해결할 수 있다. 하지만 많은 양의 폰트를 로딩해야 한다면, 초반에 폰트 로딩 시간이 길어져 Preload 하지 않는 것과 별반 차이가 없을 수 있기에 Preload 하는 이유가 사라진다.
용량이 작은 웹 폰트 확장자 사용
처음부터 용량이 작은 웹 폰트 확장자를 사용해 폰트 로딩 시간을 줄이는 방법.
일반적으로 WOFF, WOFF2가 압축률이 좋아 용량이 작아 가장 많이 사용된다. 아래 그림을 보고 각 브라우저가 지원하는 형식에 맞춰 사용하면 된다.
서브셋 폰트 사용
불필요한 글자를 제거하고 사용하는 글자만 남겨둔 폰트를 서브셋 폰트라고 한다. 특히 한글의 경우 글자 수가 많아 파일 용량이 높기 때문에 '롾, 렶, 뢇, 롢, 갎, 갫....'등 사용하지 않는 글자를 제거해 용량을 줄일 수 있다.
4️⃣ 기타
이 외에도 unicode-range, font face observer라이브러리, font-display 등 여러가지 방법이 있다. 자세한 사항은 네이버D2에서 확인 가능하다.
** 이미지 출처 : 네이버D2
