ImagePlay.
← 목록보기
타이포그래피

웹폰트를 쓸 때 확인할 라이선스와 로딩 속도

웹폰트를 쓸 때 확인할 라이선스와 로딩 속도

웹사이트에 폰트를 쓸 때는 그 폰트가 웹에서 써도 되는 라이선스인지, 그리고 사이트를 느리게 만들지 않는지를 함께 확인해야 합니다. 개인용으로 무료인 폰트도 상업용 웹사이트에서는 쓸 수 없는 경우가 있고, 한글 폰트는 글자 수가 많아 파일이 커서 페이지 로딩을 늦출 수 있습니다. 웹폰트는 사용자의 기기에 설치되지 않은 폰트를 웹에서 내려받아 보여 주는 방식입니다.

무료 폰트는 아무 데나 써도 되나요?

그렇지 않습니다. 폰트마다 사용 범위가 정해져 있습니다. 인쇄물에는 쓸 수 있어도 웹에 넣는 것은 따로 허락이 필요한 폰트가 있고, 개인 용도에만 무료인 폰트도 있습니다. 회사 웹사이트나 쇼핑몰은 상업적 이용에 해당하는 경우가 많습니다. 폰트를 내려받을 때 함께 있는 라이선스 문서를 꼭 읽어야 합니다.

노트북 화면에 다양한 글꼴 견본이 표시된 모습

라이선스에서 무엇을 확인해야 하나요?

확인할 것의미
상업적 이용회사·쇼핑몰에 써도 되는지
웹 임베딩웹사이트에 폰트 파일을 넣어도 되는지
수정 허용폰트를 변형해도 되는지
재배포폰트 파일 자체를 나눠도 되는지

가장 자주 놓치는 것은 웹 임베딩입니다. 이미지로 만든 글자는 괜찮아도, 폰트 파일 자체를 웹사이트에 올려 쓰는 것은 따로 허락이 필요한 폰트가 있습니다.

한글 폰트는 왜 무거울까요?

영어 폰트는 알파벳과 숫자, 기호 정도만 담으면 되지만, 한글은 조합할 수 있는 글자가 매우 많습니다. 그래서 한글 폰트 파일은 영어 폰트보다 훨씬 큽니다. 페이지를 열 때마다 이 큰 파일을 내려받으면 글자가 늦게 나타나거나, 처음에 다른 폰트로 보였다가 바뀌는 현상이 생깁니다.

스마트폰 화면에서 웹페이지가 로딩되는 모습

로딩 속도는 어떻게 줄이나요?

실제로 쓰는 글자만 골라 담는 서브셋 방식을 쓰면 파일 크기를 크게 줄일 수 있습니다. 압축률이 높은 웹폰트 전용 파일 형식을 쓰는 것도 도움이 됩니다. 폰트 굵기를 너무 많이 쓰지 않는 것도 중요합니다. 굵기 하나마다 파일이 따로 필요해서, 다섯 가지 굵기를 쓰면 파일도 다섯 개를 내려받아야 합니다. 제목과 본문에 필요한 두세 가지 굵기로 줄이는 것이 좋습니다.

폰트가 늦게 뜰 때 사용자 경험은 어떻게 지키나요?

폰트를 내려받는 동안 글자가 아예 보이지 않으면 사용자는 빈 화면을 보게 됩니다. 그래서 기본 시스템 폰트로 먼저 보여 주고, 웹폰트가 준비되면 바꾸는 설정을 많이 씁니다. 글자가 바뀌며 레이아웃이 크게 흔들리지 않도록, 기본 폰트도 크기와 줄 간격이 비슷한 것을 고르면 좋습니다. 타이포그래피 설정은 https://www.appclub.com/에서 더 살펴볼 수 있습니다.

자주 묻는 질문

유료 폰트는 한 번 사면 계속 쓸 수 있나요?

라이선스 조건에 따라 다릅니다. 사용 기간이나 사이트 수, 방문자 수에 제한이 있는 경우가 있습니다.

이미지로 만든 글자는 라이선스 문제가 없나요?

폰트마다 다릅니다. 이미지 사용도 라이선스에서 허용하는지 확인하십시오.

시스템 폰트만 쓰면 안 되나요?

쓸 수 있습니다. 로딩이 가장 빠르지만 기기마다 모양이 조금씩 달라질 수 있습니다.