1. 웹 폰트?
- 로컬 폰트 설치 여부와 관계없이 웹에서 항상 원하는 타이포그래피를 사용할 수 있게 해주는 기술이다.
*타이포그래피 : Typography란 글자와 글자가 위치한 공간이나 레이아웃 등 글자로 디자인된 상태를 말한다.
2. 웹폰트 사용법
웹 폰트는 css의 @font-face를 사용해서 설정할 수 있다.
- font-family : 사용할 웹 폰트의 이름을 지정한다. 이때 아무 이름으로 지정해도 상관없다. 예를 들면, humanFont1234 이런 이름도 가능하다. 하지만 최대한 본래의 폰트명과 비슷하게 하는 것이 유지보수에 도움을 주기 때문에 비슷하게 짓는 편이다.
- src : 폰트 파일의 경로와 폰트 형식을 지정한다. url로 폰트 파일 경로를 설정하고, format에 폰트 파일의 형식을 설정한다.
- fallback : 따로 속성을 지정하는 것이 아니라 사용할 폰트를 font-family 가장 앞쪽에 설정해 주고 fallback 폰트들을 그 뒤에 위치시킨다. 첫 번째 폰트를 로드하는데 실패하면 순차적으로 뒤에 선언된 폰트들을 다운로드하게 된다. 이때 뒤에 있는 폰트들이 fallback font이다.
3. 웹 폰트 최적화
이미지나 폰트 같은 외부 리소스들은 용량을 줄이는 것이 최적화의 80%를 차지하고 있다고 해도 과언이 아니다. 즉, 용량을 줄이는 것만으로도 최적화에 크게 기여할 수 있다.
최근에 진행하는 프로젝트에서 'Pretendard' 폰트를 사용하고 있는데 성능 측정을 하려고 lighthouse로 측정한 결과 다음과 같은 화면을 마주했다.
상세 보기로 펼쳐보니 가장 크게 차지하고 있던 것이 웹 폰트였다.
3.1 용량 줄이기(파일 형식)
폰트는 다양한 형식의 확장자를 통해 제공된다. 이때 형식마다 용량이 다르고 브라우저 지원 상황도 다르다.
- WOFF : 웹 오픈 폰트 포맷(Web Open Font Format)을 의미한다. 웹에서 사용하는 글꼴 포맷을 위해 여러 회사들의 협업으로 제안되었으며, 가장 널리 사용되는 웹 글꼴 포맷이다. 대부분의 최신 웹 브라우저에서 지원되기 때문에 WOFF 글꼴만으로도 웹 글꼴을 표현하는데 아무런 문제가 없습니다.
- WOFF2 : WOFF 형식을 개선해 30% ~ 50% 더 압축된 형태이다.
이제는 거의 모든 브라우저들이 WOFF2 형식을 지원하기 때문에 WOFF2 사용을 적극 권장한다.
과거에는 인터넷 익스플로러만 지원을 안 해서 따로 다른 포맷을 사용해줬어야 했지만 이미 서비스가 종료되었기 때문에 고려하지 않아도 될 거 같다.
이렇게 파일형식을 바꿔준 것만으로도 60% 정도의 용량을 줄 일 수 있었다.
3.2 서브셋 폰트
서브셋 폰트는 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트다.
영어는 26개 알파벳으로 이루어져 있다. 영문 폰트에는 대소문자를 포함해 총 72자의 글자가 필요하다.
하지만 한글은 자음, 모음의 조합으로 구성되어 있다. 모든 경우를 조합하면 한글의 글자 수는 11,172자나 된다.
이렇게만 봐도 불필요한 글자들이 많이 들어있는 것을 확인할 수 있다. 필요한 글자들만 조합하여 서브셋을 만들면 용량을 크게 줄 일 수 있다.
최근에 출시되는 서브셋 폰트를 직접 제공하기도 한다. 만약 제공되지 않는다면 직접 서브셋 폰트를 만들어 사용할 수 있다.
방법은 두 가지이다.
1. 서브셋 폰트 메이커 사용
2. fontTools 라이브러리 사용
이번 글에서는 서브셋 폰트를 직접 만드는 방법은 다루지 않는다.
