Font preload 란?
preload 는 웹 페이지에서 필요한 리소스를 미리 가져오는 것을 의미한다.
Font Preloading 이란 웹 페이지에 필요한 font 를
미리 다운로드해 빠르게 보여주는 방법으로,
사용자 지정 폰트를 사용하는 웹 페이지의 성능과 로딩 시간을 개선하는 기술이다.
Font 를 preload 하는 이유
폰트는 크게 웹 폰트(web font) 와 로컬 폰트(local font) 로 나뉜다.
웹 폰트는 웹에 올라와 있는 폰트를 다운받아서 로딩하지만,
로컬 폰트는 사용자의 기기에 이미 다운로드 되어있는 폰트 file 을 사용하기 때문에
로컬 폰트의 로딩 속도가 더 빠르다.
폰트 파일 용량이 클 수록 다운로드 시간이 길어지며,
웹 페이지 로딩 시간이 길어지기 때문에 사용자 경험에 좋지 않다.
하지만 font preload 를 해두면 웹 페이지가 로드되기 전에
폰트 파일을 미리 다운로드하기 때문에 로딩 시간을 단축시키고
사용자 경험을 개선해서 이탈률을 줄일 수 있다.
로컬 폰트(local font) 로딩 방법
로컬 폰트(local font) 는 웹 페이지 로딩 시, 이미 로컬에 들어있기 때문에
다운로드할 필요 없이 빠르게 로딩할 수 있다.
로컬 폰트를 사용하려면 로컬에 font 파일을 다운받아 두고,
CSS 에서 @font-face 로 불러올 수 있다.
@font-face {
font-family: 'FontName';
src: url('fontname.eot'); /* IE9 Compat Modes */
src: url('fontname.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fontname.woff2') format('woff2'), /* Super Modern Browsers */
url('fontname.woff') format('woff'), /* Modern Browsers */
url('fontname.ttf') format('truetype'), /* Safari, Android, iOS */
url('fontname.svg#svgFontName') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
1) font-family
font-family 에서는 폰트 이름을 지정해주는데, 꼭 폰트 파일 이름과 일치하지 않아도 불러올 수 있다.
가독성을 위해 폰트 이름은 file 명과 동일하게 작성하되, font-name 이나 font name 처럼
특수기호와 띄어쓰기 등이 있다면 편의에 따라 FontName 등(카멜 케이스 방식)으로 쓸 수 있다.
여기서 작성한 폰트 이름을 font-family 로 불러와서 재사용한다.
2) src
src 에는 로컬 폰트 파일 위치를 작성한다. 로컬 폰트는 로컬 또는 원격 서버에 위치할 수 있다.
경로를 지정해주고 format 에서 폰트 파일 유형을 작성해주면 된다.
일반적으로 woff2 > woff > ttf > otf 순으로 작성하지만,
대부분 웹 폰트용 woff2 / woff 에서 거의 다 지원하는데다가
용량도 훨씬 작기 때문에 woff 까지만 넣어주는 경우가 많다.
3) font-weight / font-style
해당 폰트 파일의 font-weight 와 font-style 을 지정해주면 된다.
폰트 두께에 따라 파일이 나누어져 있는 경우가 많기 때문에
각 파일별로 @font-face 를 선언해주고 font-weight 에서 두께를 구분 짓는다.
웹 폰트(web font) 로 로딩하는 방법과 최적화 기법
1) 웹 폰트 로딩 및 preload 로 폰트 리소스 미리 로드하기
웹 폰트는 HTML 의 <head> 내에 <link> 태그로 불러올 수 있다.
또는, CSS 에서 @import 로 삽입할 수도 있다.
구글 폰트에서 link 와 import 방식을 둘 다 지원하고 있으니
구글 폰트에 먼저 검색해서 경로를 복사해오는 것이 간편하다.
단, 폰트를 외부에 요청하는 동작은 다른 요청보다 늦게 실행된다.
때문에 다음과 같은 rel="preload" 속성을 가진 <link> 태그를 <head> 에 추가해줌으로써
폰트를 미리 로드할 수 있다.
<link rel="preload" href="url" as="font" type="font/woff2" crossorigin />
하지만 preload 를 남용하면 렌더링 시간을 지연시킬 수 있으므로,
필요에 따라 우선순위가 높은 폰트를 선별해 사용하는 것을 권장한다.
2) 폰트 파일 용량 줄이기
파일 용량이 클 수록 폰트를 로드하는 속도가 길어지기 때문에
폰트 파일 용량을 줄여서 로딩 시간을 줄일 수 있다.
파일 용량을 줄인다는 것은 압축률이 좋은 웹 폰트 확장자를 사용한다는 것이다.
앞서 말했듯이, woff2 와 woff (Web Open Font Format) 는 웹 폰트 format 으로,
압축률이 가장 좋고 대부분의 브라우저에서 지원된다.
woff 보다 최신 버전인 woff2 가 약 30~50% 압축률이 좋기 때문에
woff2 확장자로 웹 폰트를 배포하는 것이 좋다.
TTF(TrueType) / OTF(Open Type Font) 는 웹 폰트로 사용할 수 있지만
압축률이 낮고 지원하지 않는 브라우저도 있다.
꼭 사용해야 한다면 Gzip, Brotli 와 같은 압축 기술로 압축률을 높일 수 있다.
3) 서브셋 (Subset) 폰트 사용
서브셋 폰트 (Subset font) 는 font 파일에서 사용하지 않는 글자를 제거하고
필요한 글자만 선택해서 남겨둔 font 를 말한다.
서브셋 폰트를 만들려면 서브셋 폰트를 만들어주는 사이트를 이용해야 한다.
일반적으로 영어보다 한글 폰트가 용량이 크기 때문에,
서브셋 폰트로 만들어 용량을 줄이고 빠른 로딩 속도와 더 적은 대역폭 사용을 가능도록 할 수 있다.
언어별 전용 Subset font를 사용할 수도 있고 개발자 의도에 따라 만들어 사용할 수 있다.
서브셋 폰트 (Subset font) 사이트