본문 바로가기

HTML/CSS

나눔고딕 웹폰트 적용 방법(Google API 이용)

Blog 또는 Homepage 제작시 폰트가 기본 돋움 또는 굴림으로 설정되어 가독성이 떨어 질때가 있습니다.
이런경우 보통 폰트 지정을 위해서 CSS 에서 font-family 등을 다음과 같이 지정하여 사용하시는 경우가 많습니다.
이런 경우는 보통 사용자 컴퓨터에 나눔고딕이 설치 되어 있는 경우이며,

font-family: '나눔고딕', 'NanumGothic', '맑은 고딕', 'Malgun Gothic', '굴림', 'Gulim', 'sans-serif', 'Tahoma';
사용자 컴퓨터에 폰트가 없을 때는 다음과 같이 서버에 파일을 올려서 사용합니다.
@font-face {
    font-family:'Nanum Gothic';
    src: url('font/NanumGothic.eot');
    src: url('font/NanumGothic.eot?#iefix') format('embedded-opentype'),
         url('font/NanumGothic.woff') format('woff'),
         url('font/NanumGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; 
}
위의 방법으로 처리 하면 서버에서 폰트등을 다운 받기 때문에 서버의 트래픽이 발생하는 단점이 있습니다.
그래서 구글 API를 사용하여 폰트를 적용할수 있습니다.

 방법은 CSS를 import 하여 처리하는 방법입니다.

@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanumpenscript.css");

font-family:'나눔고딕', Nanum Gothic, '굴림', 'Gulim', 'sans-serif', 'Tahoma';
font-family:'Nanum Brush Script' '굴림', 'Gulim', 'sans-serif', 'Tahoma';
font-family:'Nanum Gothic Coding '굴림', 'Gulim', 'sans-serif', 'Tahoma'';
font-family:'나눔명조', NanumMyeongjo, 'fontnm', 'Nanum Myeongjo' '굴림', 'Gulim', 'sans-serif', 'Tahoma';
font-family:'나눔펜', NanumPen, 'fontnp', 'Nanum Pen Script' '굴림', 'Gulim', 'sans-serif', 'Tahoma';}
위의 방법처럼 해당 폰트를 가져와서 font-family 를 지정하여 사용하면 나눔고딕 웹폰트를 사용할수 있습니다.
해당 구글 API 는 ( IE 계열(6~10) 및 크롬/파이어폭스 등 모두 정상 작동) 익스플러 의 경우 폰트 렌더리링 하며 시간이 걸릴수도 있습니다.)