[HTML] font 사용 시 주의사항

웹 개발 시 가독성을 높이거나 디자인을 위해 많이들 폰트를 적용하고는 합니다.

@font-face {
	
	font-family : '너무예쁜폰트'
    src : url(../font/NanumSquareR.ttf)
}

보통은 위와 같이 폰트의 작명과 네이밍을 통해 폰트를 사용합니다.

여기서 우리는 한글 폰트의 용량에 대해 알아야 합니다.
한글 정말 완벽한 언어이지만 프로그래밍상에서 한글은 정말 귀찮은 존재입니다.

한글이 표현할 수 있는 글자는 총 1만 1,172개라고 합니다,
이렇게 많은 조합 때문에 추리고 추린 완성형 폰트이미지 2350자만 포함하여도 3MB는 충분히 넘을 것입니다.

영어의 94폰트이미지의 개수와 굉장히 차이가 나는 것을 알 수 있습니다.
때문에 구글에서 배포하는 Noto Sans[영문]은 203K 로 작은 용량인 반면 한글을 포함하는 폰트의 용량은 16.5MB 입니다.

해결방법

1. woff, woff2 확장자 사용

woff 확장자는 폰트를 경량화 시키기 위해 만들어진 확장자로 ttf > eot > woff > woff2 순으로 작습니다.
ttf와 woff 확장자 비교 시 NanumSquareR 기준 3/1 수준이였습니다.

현재 크롬, 파이어폭스, 사파리, 엣지 브라우저에서 지원하고 있습니다.

2. google fonts 사용

google fonts는 구글에서 폰트를 호스팅해주는 서비스로 link 또는 css import를 통해 제공한다.

우리 사이트의 용량과 트래픽을 동시에 줄일 수 있는 방법입니다.