zero-base/ 웹폰트(preload, 로컬폰트, 최적화)

폰트 preload

웹 폰트는 일반적으로 다른 리소스와 함께 다운로드 되는 경우가 많아서 성능 문제가 발생할 수 있음

이를 해결하기 위해 preload를 사용

preload를 사용하면 웹폰트를 브라우저가 미리 다운로드하기 때문에 페이지 로딩 속도가 빨라짐

<link rel="preload" href="fonts/font.woff2" as="font" type="font/woff2" crossorigin>

(as 속성은 리소스 유형, type은 mime유형, crossorigin은 다른 도메인에서 폰트를 가져올 때 사용)

 

preload는 페이지 성능을 개선할 수 있는 방법이지만,

폰트를 미리 다운로드 할 수 있는 만큼

많은 양의 폰트를 사용한다면 페이지 로딩 시간을 되려 증가시킬 수 있음

그리고 현재 페이지에서 사용하지 않는 폰트여도 폰트를 다운로드 할 수 있음

 

 

로컬폰트 로딩

CSS에서 폰트를 선언하게 되면 폰트를 무조건 다운로드 하게 됨 (불필요한 리소스 요청)

이를 막기 위해 local 사용

로컬에 있는 폰트를 사용하면 폰트를 다운로드 하지 않아도 돼서 더 빠르게 로딩 가능

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'),
  url('fonts/MyFont.woff2') format('woff2'),
  url('fonts/MyFont.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}

 

 

그 외 최적화 방법

위에서 적은 2가지 방법외에도 폰트 최적화 방법이 더 있다.

 

폰트파일의 크기 줄이기 (woff2, 서브셋)

압축률이 좋은 woff2폰트 사용하기 혹은 서브셋폰트를 사용하기

woff2를 지원하지 않는 브라우저에서는 woff 사용함

서브셋 폰트란? 불필요한 글자를 제거한 폰트파일

ex) 뛟 뷃 랽 과 같이 잘 사용하지 않는 글자를 제거

 

 

CSS: font-display

css의 font-display: swap;을 사용하면 폰트 파일을 다운로드 하는 동안은

대체 폰트를 사용하고 폰트 파일이 다운로드 되면 그때 폰트를 교체하는 방식

폰트가 로드 되지 않아도 사용자는 텍스트를 읽을 수 있음

 

https://developer.mozilla.org/ko/docs/Web/CSS/@font-face/font-display

font-display - CSS: Cascading Style Sheets | MDN