폰트 로딩 잘못하면 사이트 훅 간다
웹사이트 제작할 때 고민하게 만드는 요소 중 하나인 폰트는 마치 결혼 준비 같다. (기자는 결혼을 한 적이 없다.) 선택지는 많고, 알맞는 정답은 없는거 같아서다. 폰트도 정말 많은 디자인이 있고, 심지어 폰트를 정하고 나서도 굵기까지 정해야 한다. (그래서 기자는 개인 프로젝트를 할 땐 맘에 드는 폰트 하나를 정하고 그것만 쓴다.)
폰트를 설정할 때 선택지는 두가지로 나뉜다:
1. 로컬 폰트
2. 웹 폰트
로컬 폰트
로컬 폰트는 사용자의 기기에 이미 설치된 폰트를 의미한다. 이미 기기에 설치되어 있는 폰트는 따로 다운로드를 받을 필요가 없기에, 웹사이트의 빠른 렌더링 속도를 보여준다. 그러나, 사용자의 기기에 폰트가 설치되어 있지 않다면, 당연하게도 웹사이트가 제대로 렌더링 되지 않는다.
@font-face {
font-family: 'MyFont';
src: local('MyFont'), url('my-font.woff2') format('woff2');
}웹 폰트
웹 폰트는 서버에서 다운로드 받은 후 적용해서 웹사이트에 사용되는 폰트로써, 네트워크 환경에 따라서 렌더링 성능의 편차가 크다. 웹 폰트를 미리 로딩하려면, HTML의 <head> 태그 안에 preload를 사용한다.
<link rel="preload" href="my-font.woff2" as="font" type="font/woff2" crossorigin>
웹 폰트의 성능 편차 때문에 여러 최적화 방법을 함께 적용하는데, 그 방법들은 다음과 같다:
1. 폰트 서브셋팅: 필요한 글자만 포함한 폰트 파일을 생성하여 로딩 시간을 줄인다.
2. 비동기 로딩: JavaScript를 사용하여 폰트를 비동기적으로 로딩한다.
3. 캐싱: 캐시 헤더를 설정하여 재방문 시 빠르게 폰트를 로딩한다.
하루하루 목표를 향해 나아가야지