T LAB

리스트목록으로가기

웹폰트 적용하기

웹폰트(webfont) 란, 웹페이지를 접속한 사람의 컴퓨터에 폰트가 설치 되어 있지 않아도 임시로 폰트를 다운 받아 웹페이지에서 볼 수 있도록 하는 형식의 폰트입니다.


웹페이지 디자인에서 타이포그라피(typography)가 중요해 지면서 다양한 폰트를 이용하고자 하는 요구도 커져 가고 있고, 웹표준과 웹접근성 측면에서도 웹폰트의 사용이 강조되고 있습니다.

 

 

먼저 웹폰트를 적용하기 위하여 폰트 포맷에 대하여 먼저 알아야 합니다.

 

포맷

익스플로러

파이어폭스

크롬

사파리

오페라

eot

ie4~ie8

x

x

x

x

woff

ie9 이상

지원

지원

지원

지원

 
*eot(Embedded OpenType) Microsoft에서 웹페이지용으로 디자인된 폰트 포멧
*woff (Web Open Font Format) W3C에서 권장하며, 표준화 진행중인 폰트

 

자 이제, 웹폰트를 적용해 볼까요? 한글 폰트 중에 많이 사용되는 “나눔고딕" 을 적용하는 방법에 대해서 알아보겠습니다.

 

 

1. 직접 웹폰트를 서버에 올려서 사용하는 방법

 

초기에 사용되던 방법으로 직접 eot 파일과 woff 를 웹페이지 서버에 올려서 사용하는 방법 입니다.
네이버 폰트 (http://hangeul.naver.com/) 에 접속하면 나눔고딕 TTF 폰트를 다운받을 수 있습니다.
TTF 폰트는 MS Windows용 폰트로 eot, woff 폰트 포맷으로 쉽게 변환 할 수 있습니다.

 

TTF -> EOT 변환 사이트 : http://eotfast.com/

TTF -> WOFF 변환 사이트 :  http://people.mozilla.org/~jkew/woff/

 

변환된 eot, woff 파일을 서버에 올리고 나면 css 에 코드를 추가하여야 합니다. 

 

@font-face {

    font-family: NanumGothic; // 사용할 폰트명

    src: url('directory/NanumGothic.eot'); // eot 포맷

    src: local(※), url('directory/NanumGothic.woff') format('woff') // ie9이상은 woff 포맷 적용

    }

 
이제 나눔 고딕 폰트를 사용할 준비가 끝났습니다. 사용하고 싶은 부분에 font-family:’NanumGothic’ 를 쓰면 나눔 고딕 폰트가 적용됩니다.

 

 

 

구글 폰트에서 현재 6개의 한글 폰트를 제공합니다. (Nanum Gothic, Nanum Brush Script, Nanum Gothic Coding, Nanum Myeongjo, Nanum Pen Script, Hanna)
Ctrl+F 눌러서 korean 으로 검색하면 각 폰트를 사용하기위한 css 코드와 예시를 제공합니다.

 

 

Nanum Gothic (Korean)

 

The Nanum fonts (Korean : 나눔글꼴) are unicode fonts designed especially for the Korean-language script, designed by Sandoll Communications (Korean : 산돌 커뮤니케이션) and Fontrix (Korean : 폰트릭스). The publisher is Naver. Nanum Gothic is a contemporary sans-serif with a warm touch and is expertly hinted for screen use.

 

 

Link

 

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


Example

 

font-family: 'Nanum Gothic', sans-serif;

 

Link 코드를 웹페이지 css에 추가하면 웹폰트 파일의 추가 없이 나눔고딕 폰트를 적용할 수 있습니다.

구글 폰트는 600개가 넘는 영문 웹폰트를 제공하며 무료로 사용 가능 합니다. (http://www.google.com/fonts)


구글 폰트와 같은 방식을 *CDN 이라고 합니다. 이 방식을 이용하면 첫 번째 방식보다 장점이 있습니다. 폰트 파일을 직접 업로드 하지 않아도 되므로 트래픽 면에서 효율적 입니다. 또한 HTTP 요청을 여러 도메인으로 분산 시킬 수 있으므로 속도 면에서도 강점을 가지고 있습니다.

*CDN(Content delivery network 또는 Content distribution network) 콘텐츠 전송 네트워크

 

 

다수의 웹폰트를 적용하게 되면 적용한 모든 폰트 파일을 다운 받기 때문에 웹페이지의 성능을 저하 시킬 수 있습니다. 때문에 디자인과 웹표준을 고려한 웹폰트의 적절한 사용이 필요합니다.

이전글 다음글 포함한 이전다음 표
이전글 최고의 웹페이지 용량 분석 도구 10가지
다음글 반응형 웹디자인 레이아웃 패턴들

빠른상담신청

02.581.6422
02.581.6422
top