웹폰트 (Web Font)

안녕하세요 다룸 입니다. 오늘은 "웹폰트"에 대해 공유드리려고 합니다.

배경

웹 사이트는 대부분 텍스트로 이루어져있습니다.
font-family 속성은 사이트 방문자의 컴퓨터에 같은서체가 설치되어있는 경우에만 올바르제 동작하는 속성이었습니다.
그렇지 않으면 부라우저가 지정한 기본 서체로 표시됩니다. 하지만 웹 사이트에 폰트를 심어주고 그 폰트를 사이트에 불러오는 것을 웹폰트라고 하며, 최근들어서는 브라우저들이 웹 서체(Web Font)라는 것을 대부분 지원하기 시작하였습니다.

웹 폰트는 온라인에서 다운로드 됩니다. 크기, 굵기 등 font-family 글꼴 정보를 브라우저가 정보를 불러와 지정한 CSS방식대로 웹 브라우저에 불러와 주는 것 입니다. 다만 이 웹 폰트의 경우, 특히 한국어/중국어 부분에서 많은 글꼴이 있기에 로딩이 느려지는 경우가 있어 웹폰트는 가벼워야합니다. 사용 빈도 수가 낮은 문자들을 지워 경량화시킬 수 있습니다.

웹폰트 장단점

장점

• 웹폰트를 적용하게 되면 시스템에 폰트가 없어도 된다.
• 이미지 폰트에 비해 웹접근성이 향상되며, 수정(유지보수)이 쉽다.
• 번역기를 통해 번역을 할수있다.

단점

• 다수의 웹폰트를 적용하게 되면 적용한 모든 폰트 파일을 다운 받기 때문에 웹페이지의 성능을 저하 시킬 수 있다.
• 한문사용시 웹폰트를 최적화 시키기 위해 한문을 빼고 코드를 만드는 경우가 많아 웹폰트 안에 한문이 있는지 확인필요

폰트 종류

EOT(Embedded Open Type)

• MS에서 제작 IE8이하 버전에서는 EOT 파일만 지원함

OTF(OpenType Font) / TTF(TrueType Font)

• OTF/TTF 형식은 쉽게 복제될 수 있어(불법으로) 대신 WOFF 형식이 만들어짐

WOFF(Web Open Font Format)

• moz 등 웹에서 사용할 목적으로 개발
• OTF/TTF 를 이용한 구조의 압축된 버전으로, 다른 글꼴 형식보다 빠르게 로드됨.
• 파일안에 meta date & license 정보도 포함이 가능함.
• 개선된 WOFF2 버전이 있으나, 일부 브라우저 미지원

SVG/SVGZ (Scalable Vector Graphics (Font)

• *SVGZ는 SVG의 압축된 버전
• 파일 크기를 훨씬 가볍게 해서 모바일 사용에 이상적으로 만들었습니다.

지원 범위

1. 웹폰트 종류별 브라우져 지원 범위

• EOT : IE 6/7/8/9/10/11 (하위 대응 하지 않을 경우, EOT를 제거) [ 참고 ]
• WOFF : IE 9/10/11, Firefox, Chrome, Safari, Opera, iOS Safari, Android Browser, Chrome for Android [ 참고 ]
• WOFF2 : Chrome, Opera, Chrome for Android (Firefox, Safari 도 최신버전은 지원함) [ 참고 ]
• TTF : IE 9/10/11, Firefox, Chrome, Safari, Opera, iOS Safari, Android Browser, Chrome for Android (폰트마다 용량이 다름) [ 참고 ]

2. 크로스브라우징을 위해서는 EOT 와 WOFF 만으로도 가능 (WOFF2가 용량은 더 작으나 하위 호환성을 위해 WOFF 사용)

파일사이즈 : WOFF2(696kb) < EOT(755kb) < WOFF(975kb) < TTF(2.4mb) : 나눔고딕 Regular 기준

사용 방법

웹폰트의 경우 라이센스 문제가 있기 때문에, 유료 폰트는 라이센스 획득 후 사용 가능합니다.
보편적인 무료 폰트는 구글에서 서비스 하고 있습니다. (http://www.google.com/fonts/)

1. 웹폰트 적용 방식 (예시)

CDN 링크방식

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

@import url 방식

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>

2. @font-face 적용 (예시)

@font-face {  font-family: 'kakaoFont';
  font-style: normal;/* 폰트 명 */
  font-weight: 100; /* 폰트 스타일 설정 */
  src: url(font/Kakao-aLt.eot);/* IE9 호환성 보기 */
  src: local("☺"),/* 웹 브라우저가 지원하지 않는 불필요한 웹 폰트 호출을 막는데 사용 */
       url(font/Kakao-aLt.eot?#iefix) format('embedded-opentype'),/* IE6-IE8 */
       url(font/Kakao-aLt.woff2) format('woff2'),/* WOFF의 차기 포맷 */
       url(font/Kakao-aLt.woff) format('woff'),/* 표준 브라우저 */
       url(font/Kakao-aLt.ttf) format('truetype'),/* Safari, Android, iOS */
       url(font/Kakao-aLt.svg#KakaoaLt) format('svg');/* TTF에서도 커버가 안되는 기기들에 대한 대응 */
}
body {font-family:'kakaoFont'}
/* 참고사항 : font-family 명이 같더라도 font-weight를 통하여 두께별로 설정이 가능합니다. (Light,bold,ExtraBold 등) 반대로 같은 폰트라도 font-family 명을 다르게 사용 하여 두께별로 사용 가능합니다 */

디자인 적용 이슈

PSD 상의 수치대로 넣고 테스트 - 나눔고딕적용, 흐린배경이 원본, letter-spacing: -1px 공통적용

1. ie8 - 디자인과 자간, 행간 달라짐, 로컬폰트와 웹폰트도 동일하지 않음

로컬 폰트

웹 폰트

2. ie9, 10 - 디자인과 행간이 약간 틀림, bold 체의 굵기만 제외하면 웹폰트와 로컬 폰트 일치

로컬 폰트

웹 폰트

3. ie11, Firefox - 디자인과 자간이 달라짐, bold 체의 굵기만 제외하면 웹폰트와 로컬 폰트 일치

로컬 폰트

웹 폰트

4. Chrome, Opera - 디자인과 자간이 달라짐

로컬폰트와 웹폰트 동일

5. Safari - Chrome, Opera와 비슷하나 bold체에 대한 행간이 약간 틀림

로컬폰트와 웹폰트 동일

참고 사이트

구글 웹폰트를 빠르게 로드하는 팁 7가지

구글에서 정식으로 제공하는 웹폰트

스포카 한산스 무료 웹 폰트

Web Font Loader

구글 웹 폰트 빠르게 불어오는 방법

지금까지 웹폰트 (Web Font)에 대해 살펴보았습니다.
다음 시간에 새로운 주제로 찾아뵙겠습니다.
감사합니다.