[웹폰트]웹폰트에 대한 이야기
웹폰트에 대한 이야기를 해보려한다. 이번에 웹폰트를 적용하면서 알게 된 것과 팁을 공유해본다.
웹폰트
웹폰트란 방문자의 로컬시스템에 원하는 서체가 없을 경우, 온라인의 특정 서버에 위치한 서체를 내려받아 화면에 표현할 수 있도록 해주는 웹 전용 서체이다.
브라우저 및 OS마다 기본폰트도 다르고, 폰트 렌더링 방식도 제각각이다보니 모든 사용자에게 같은 경험을 주기 원하는 입장에서는 문제가 됬다. 이전까지 같은 경험을 주기 위해 이미지를 그냥 업로드 하는 방식을 채택하는 곳도 많았다. 지금은 시대가 달라졌고, 프론트엔드 개발자가 커버할 수 있게 됬다. (가끔 드는 생각인데, 프론트개발자는 너무 많은걸 한다.)
원하는 서체를 스타일시트의 @font-face에 등록하고, font-family 속성을 통해 문서 안에서 자유롭게 사용할 수 있다.
한글 웹폰트
글자수
한글이 표현할 수 있는 글자는 총 11172개라고 이야기 되어진다. 또한 외래어와 외국어도 많이 사용하기 때문에 영어는 필수이다. 즉 영어 + 11172개의 글자를 가져야 한글 웹폰트가 될 수 있다.
웹폰트의 문제점에서도 적어놓았는데, 이건 너무 무겁다. 폰트업체에서는 머리를 써서 실제 사용되는 글자를 추려냈고, 그 개수는 2350자가 됬다. 이렇게 추려진 폰트를 경량형 폰트라고 한다. 즉 경량화 된 한글 폰트는 영어 + 2350자가 된다. 여기서 개인사이트(블로그처럼 혼자 글을 쓰는경우)에서는 자신의 글 쓰는 성향등을 고려하면 사실 그 절반으로도 줄일 수 있다.
용량
11172개의 글자가 모두포함된 기본포맷의 한글폰트 용량은 약 4MB이다. 그걸 웹사이트에 접속하는 사람마다 받게한다면 데이터폭력(?)이나 다름없다. 2350자로 경량화된 폰트의 용량은 약 2MB가 된다. IE를 지원하기위한 파일(TTF,eot)의 용량이 2M정도 압축률이 좋은 woff포맷의 파일은 약 500KB정도가 된다.
포맷
IE에 대한 지원이 필요없다면 woff나 그보다 더 압축률이 좋은 woff2를 사용하면 된다. 권장되는 바는 woff이다. IE에 대한 지원이 필요하다면 eot가 필요하므로 eot와 woff를 사용하면 대부분의 상황에서 커버가 가능하다. 용량을 선택하고 사파리를 지원하지 않아도 된다면 woff2로가자.
웹폰트 빠르게 불러오기
head태그의 가장 처음에 위치
CSS를 불러오기 전에 불러들이면 스타일이 반영되기 전에 폰트를 받을 수 있는 가능성이 높아진다.
참조링크를 사용
폰트를 불러오는 방법은 @import, link이 있다고 할 수 있다. 임포트를 사용하면 웹페이지 로드에 딜레이가 발생하므로 link를 사용한다.
최소화된 폰트로딩 수
본문용과 제목용정도로 최대 2개내에서 불러오는 것이 좋다. 나는 하나만 불러서 쓰기로했다.
한줄로 처리
네트워크 I/O는 아주 많은 부하가 걸린다. 요청은 최대한 적게하는 것이좋다. 아래는 두개의 폰트를 한번에 요청하는 코드이다.
<link href="https://fonts.googleapis.com/css?family=Bellefair|Open+Sans" rel="stylesheet">
웹폰트 로더
CSS가 로드되기 전에 구글 폰트가 로드되길 원하고, FOIT, FOUT를 방지하려면 웹 폰트 로더를 사용하자. 웹 폰트로더는 폰트가 사이트의 나머지요소가 로드되기 전에 로드되게 해준다.
방식은 보통 비동기방식과 동기방식이있다. 확실히 폰트가 먼저 로드되길 원한다면 동기방식을 사용하면된다. 비동기방식으로처리하면 글자 깜빡임을 보게 될 확률이 높다. 대신 비동기방식을 사용한다면 웹사이트의 폰트 외의 요소들을 먼저 받게되므로 웹사이트의 로딩이 빨라진다.
부록
나는 프론트엔드를 하기전에 디자인을 했기때문에 폰트에 대한 지식이 조금 있는편이었다. 개발자를 위한 폰트에 대한 정보를 꾸준히 업로드 해보려한다. 혹시 폰트에대해 궁금한 점이 있으면 댓글로 남겨주시면 추가 반영하겠습니다.
글자체
- serif : 명조
끝이 구부러져있는 글자체
- sans-serif : 고딕
딱딱 끊어지는 글자체. 보통 제목에 많이 쓰인다.
2023년 새해에는 성장하고 함께하고 싶다면?
Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.
