웹디자인

웹폰트 최적화를 위한 과정들

웹 폰트는 사이트에 필요한 요청 횟수를 늘리고 페이지의 크기도 커지게 한다. 글꼴은 아름다움과 페이지 속도 사이에서 저울질하게 하는 고전적인 문제다. 글꼴을 가능한 한 효율적으로 사용하는 것이 중요하지만 성능과 참여 지표로 사이트에 포함할 가치가 있는 지 확인하는 것도 중요하다.

WOFF(Web Open Font Format, 웹 오픈 글꼴 포맷)의 지원이 늘어나고 있음으로 사용자의 브라우저와 사이트가 어떤 브라우저를 지원하고 있는지에 따라 크롬 6+, 파이어폭스 3.6+, 인터넷 익스플로러 9+, 사파리 5.1+에서 지원하는 @font-face 같은 더 짧은 선언 방법도 사용할 수 있다.

그런 다음 font-family를 사용하여 글꼴을 셀렉터에 적용하고 사용자가 새로운 글꼴을 내려받지 못한 경우에 대비해 대체 글꼴1도 포함한다.

 

웹 글꼴의 파일 크기는 수 Kb에서 Mb까지 다양하다. 사용하는 웹폰트 파일의 크기가 얼마인지 점검하고 다음의 방법을 통해 크기를 줄일 수 없는지 살펴본다.

  • 사이트 로고처럼 글꼴 주 일부 글자만 사용하는가? 아니면 모든 글자와 문장 부호를 사용하는가?
  • 글꼴이 여러 언어를 지원하는가? 혹시 하나의 부분 집합으로 언어를 줄일 수 있는가?
  • 불필요한 문자를 낱개로 제거할 수 있는가?

문자 부분 집합은 웹폰트 파일 크기를 줄일 수 있는 가장 대표적인 방법이다. 구글이 하는 것과 같은 글꼴 호스팅 서비스를 통해 글꼴을 사용하고 ㅣㅆ다면 특정 문자 집합만 로딩하도록 선택할 수 있다. 다음은 예제다.

<link href="http://fonts.googleapis.com/css?family=Philosopher&subset=Cyrillic" rel="stylesheet"/>

구글 호스팅 글꼴에서 특정 문자만 로딩하려면 다음과 같이 한다. 예를 들어 Philosopher 글꼴에서 H, o, w, d, y 문자를 로딩한다고 하자.

 

  1. 사이트 방문자 중에는 웹 글꼴을 지원하지 않는 브라우저를 사용하거나 웹 글꼴을 사용하지 않도록 설정한 사용자가 있을 것이다. 혹은 글꼴이 깨진 경우도 있다. 이를 대비해 대체 글꼴을 Georgia나 Arial처럼 플랫폼에 관계없이 사용할 수 있으면서 첫번째 글꼴과 비슷하거나 sans-serif나 serif처럼 일반적인 글꼴을 사용해야 한다.
되고 싶은 것보다 하고 싶은게 많아요. 어느 순간 둘 중 하나를 선택해야 한다면 하고 싶을 걸 택할 겁니다. 삶은 짧고, 불확실하니까.