나눔고딕 웹폰트 설치하기
컨텐츠 정보
- 27,078 조회
- 0 추천
- 목록
본문
윈도우XP의 기본글꼴은 굴림체,바탕체입니다.
이런 상황에서 한글 글꼴의 획기적인 전기를 마련한 것은 윈도우7의 맑은 고딕체입니다만....
이 맑은 고딕체는 문제가 있습니다. 트루타입이라 가독성이 떨어진다는데 있습니다.
그래서 나온 한글 폰트가 바로 나눔고딕체입니다.
하지만 이 나눔고딕체는 윈도우 기본글꼴이 아니라는 문제가 있습니다.
설정을 해놔도 못본다는 것이지요...
그래서 웹폰트를 블로그내에 설치를 해야 합니다.
1.기본적인 설치방법.
기본적인 방법은 나눔고딕의 EOT파일을 티스토리에 저장을 한 다음 CSS에 아래과 같은 명령을 삽입하는 것입니다.
@font-face {
font-family:'NanumGothic';
src: url('images/NanumGothic.eot');
}
그런데 EOT 글꼴은 익스플로러밖에 사용할 수 가 없습니다.
웹폰트 적용에 대한 다른 설명이 나온 블로그글들은 대게 여기서 끝나던데...
그럼 크롬이나 파폭,사파리등은 사용이 불가능합니다.
익스플로러를 선호하지 않는 유저들이 늘어나는 가운데 익스플로러에서만 적용가능한 팁은 반쪽짜리 팁입니다.
그래서 기타 브라우져들도 사용이 가능한 WOFF,TTF폰트를 삽입해서 아래와 같이 CSS에 삽입해줍니다.
@font-face {
font-family:'NanumGothic';
src: url('images/NanumGothic.eot');
src: url('images/NanumGothic.eot?#iefix') format('embedded-opentype'),
url('images/NanumGothic.woff') format('woff'),
url('images/NanumGothic.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
2. 모빌리스 웹폰트를 이용하는 방법
그럼에도 문제점이 여전히 남아 있습니다.
블로그내 설치파일은 트래픽에 제한이 있습니다.
더 큰 문제는 익스플로러는 웹표준을 따르지 않는지라 적용이 잘됬다 안됬다하는 문제점이 있습니다.
(썩을 익스플로러)
그리고 각기 폰트파일의 기본 용량이 2메가, 4메가씩 하는지라 로딩속도도 느릴 수 밖에 없습니다.
하지만, 나눔고딕같은 무료폰트를 웬폰트로 서비스를 하는 업체들이 있습니다.
이런 서비스를 이용하면 모든 문제점이 한방에 해결됩니다.
모빌리스에 제공하는 웹폰트 입니다.
(http://api.mobilis.co.kr/webfonts/)
기본적으로 태그적용이 간편하고 폰트 용량이 매우 적습니다.
(eot파일-609kb, wof 파일 f-718k, ttf 파일 -1531kb)
모빌리스에 나눔고딕을 사용하는 방법을 보면 아래와 같이 나와있습니다.
<head>
<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb'
rel='stylesheet' type='text/css' />
...
</head>
이 경우는 CSS를 사용하지 않는 경우이고...
티스토리는 CSS를 따로 이용하기 때문에 티스토리에서는 CSS에 아래 문구를 도입부에 삽입해 줍니다.
@import url(http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb);
이 방식이 간단한 이유는 브라우져에 따라 아래처럼 자동으로 스크립트가 변환되기 때문입니다.
@font-face { font-family:'NanumGothicWeb'; font-style:normal; font-weight:400; src: url('http://webfonts-cdn.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.eot');}@font-face { font-family:'NanumGothicWeb'; font-style:normal; font-weight:400; src: url('http://webfonts-cdn.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.woff') format('woff');}브라우저에 맞는 폰트형식으로 자동 변환이 됩니다.
그래서 별도의 지정이나 여러가지 것들을 고려할 필요가 없습니다.
물론 이것으로만 끝나는건 아니고.. CSS에서 폰트를 지정해줘야 합니다.
기본적으로 모빌리스에서 나눔고딕의 영문이름이 NanumGothicWeb입니다.
그래서 CSS에서 폰트를 NanumGothicWeb으로 바꿔줍니다.
아래처럼 폰트를 바꿔줍니다.
(기본폰트는 티스토리 스킨마다 다르나 Dotum으로 되있습니다)
@charset "utf-8";
* {
margin:0;
padding:0;
border:0;
line-height:1.3;
font-family: 'NanumGothic', '나눔고딕','NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', Dotum;
}
그런데 NanumGothicWeb이 아닌 'NanumGothic', '나눔고딕','NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', Dotum 으로 표시를 합니다.
이유는 PC에 나눔고딕체가 설치되있을경우 기본적으로 PC에 있는 폰트를 사용하고 없을 경우 NanumGothicWeb을 사용하도록 한 것입니다.
만약 모빌리스의 서버이상으로 나눔고딕체를 사용할 수 없을 경우엔 PC에 있는 맑은고딕을 사용하고 맑은고딕도 없을 경우 돋움체를 사용하도록 된 문구입니다.
그리고 블로그에서 글꼴을 바꿀 필요가 있는 부분(Dotum)을 나눔고딕체로 바꿔 줍니다.
아래처럼 말입니다.
.entryProtected .container {padding-top:25px !important; padding-bottom:47px !important; text-align:center; }
.entryProtected p.text {padding-bottom:7px; color:#8A8A8A; font:14px/20px 'NanumGothic', '나눔고딕','NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', Dotum; }
.entryProtected p.input {width:290px; margin:0px auto; padding:10px 0px; background-color:#EFEFEF; }
.entryProtected label {color:#5C5C5C; font:bold 14px 'NanumGothic', '나눔고딕','NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', Dotum; }
3. 모빌리스의 다른 웹폰트 사용하기.
모빌리스웹폰트 페이지를 보시면 나눔체 말고도 여러가지 웹폰트를 사용할 수 있도록 되어 있습니다.
(http://api.mobilis.co.kr/webfonts/)
위에서 나눔고딕체를 적용하는 스크립트에서 폰트이름만 바꿔주면 됩니다...
@import url(http://api.mobilis.co.kr/webfonts/css/?fontface=EunjinNakseoWeb);
지금까지 블로그에 나눔고딕 설치한다고 별짓 다해봤는데 모빌리스 웹폰트를 사용하는 것 만큼 쉬운 방법은 없는듯 합니다.
그리고 나눔고딕을 설치하고 싶었지만, 브라우져마다 동일하게 적용하지 못했던 문제로 골치를 썩으셨던 분들께 큰 도움이 됐으리라 봅니다.
관련자료
-
링크
