메뉴 보이기
Profile
이온디

2015.11.19

웹폰트

모빌리어스 웹폰트 사용하기

조회 수 164 추천 수 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); 




이 방식이 간단한 이유는 브라우져에 따라 아래처럼 자동으로 스크립트가 변환되기 때문입니다.


 

익스플로러 - EOT
 
@font-face { font-family:'NanumGothicWeb'; font-style:normal; font-weight:400; src: url('http://webfonts-cdn.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.eot');}

 

 
 
크롬,파이어폭스  - WOFF 
 
@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');}

 

 
 
사파리  - TTF 
 
@font-face { font-family:'NanumGothicWeb'; font-style:normal; font-weight:400; src: url('http://api.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.ttf') format('truetype');}

 


브라우저에 맞는 폰트형식으로 자동 변환이 됩니다.
그래서 별도의 지정이나 여러가지 것들을 고려할 필요가 없습니다. 
 

 


물론 이것으로만 끝나는건 아니고.. 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);  




지금까지 블로그에 나눔고딕 설치한다고 별짓 다해봤는데 모빌리스 웹폰트를 사용하는 것 만큼 쉬운 방법은 없는듯 합니다.

그리고 나눔고딕을 설치하고 싶었지만, 브라우져마다 동일하게 적용하지 못했던 문제로 골치를 썩으셨던 분들께 큰 도움이 됐으리라 봅니다.





※현재 모빌리스 웹폰트가 부분유료로 바꼈습니다.

 

개인 블로그의 경우 5000다운로드까지는 지금과 같이 무료로 유지가 되지만  그 이상부터는 유료입니다.

 

일단 블로거님들은 모빌리스 홈페이지에서 가입을 하시고 무료호스팅으로 결재를 하시면 이전과 같이 정상적으로 웹폰트 사용이 가능해집니다.

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 97
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
159 [HTML5] HTML5 New Elements - New Semantic/Structural Elements 2018.01.07 34
[웹폰트] 모빌리어스 웹폰트 사용하기 2015.11.19 164
157 [Form] form 태그의 기본적인 사용방법 2015.08.31 84
156 [Script] jQuery Cookie(쿠키) 처리 [출처] jQuery Cookie(쿠키) 처리|작성자 주용준 2015.08.27 208
155 임시 이미지 생성 도구, 플레이스 홀더 placehold.it 2015.08.05 170
154 [Form] form 태그 안에서의 button 태그의 사용 방법(button, a, input type=submit) 2015.06.21 243
153 [jQuery] jQuery Image Slider and Gallery 2015.05.27 403
152 [Script] Top으로 스크롤 되면서 돌아가기... (by sisims) 2014.09.29 1367
151 [Script] 슬라이드 이미지 2014.06.16 3244
150 [Script] 간단한 javascript 페이징 처리 - 미니페이지 2014.06.16 3228
149 [Script] marquee 태그 위에 마우스 올렸을 때 자동스크롤 일시정지.. event 2014.02.11 3848
148 [Form] 셀렉트박스 select 화살표 이미지로 바꾸는 스크립트 2014.01.14 8587
147 [HTML5] ie에서만 사용하는 if IE 사용법나의일 2013.11.07 4050
146 [Script] 단축키 핫키로 원하는 동작을 실행하자 1 2013.09.22 4427
145 [Script] 주민등록번호 검사 스크립트 2013.09.17 0
144 [Table] 웹 접근성을 고려한 기본 테이블 구조 (html5, table, 웹 접근성, 웹 표준) 2013.09.13 7971
143 [Script] 쿠키 레이어 열기 닫기 PHP, Only Cookie - Hide/Show 2013.09.08 4376
142 [HTML5] [HTML5/CSS3] 멀티미디어 태그 (video, audio, embed, canvas) 2013.09.06 4249
141 [반응형 웹] 전진님의 반응형 웹 강좌 2013.08.18 5171