본문으로 바로가기



블로그에 원하는 글꼴을 사용하는 두가지 방법이 있다.

  • 직접 폰트파일을 웹에 올려서 사용
  • 인터넷 업체가 제공하는 웹폰트를 사용 (권장)


1. 직접 폰트파일을 웹(서버)에 올려서 사용하는 방법


지금 설명하는 방법이 좋다는 것은 아니다. 단점이 있다. (용량이 커서, 로딩 시간차가 발생할 수 있다.) 그러나 방법을 안다고 나쁠건 없다.


여기에서는 NanumGothic으로 설명한다.

다운 받은 폰트를 블로그에 올린다.  (NanumGothic.ttf, NanumGothic.eot)

images폴더에 저장 될 것이다.


그리고 style.css 파일에 다음 소스를 삽입한다. ▼

/* ******* font ******* */

@font-face {

        font-family:NanumGothic;

        src:url('./images/NanumGothic.eot');

        src:local('NanumGothic'), url('./images/NanumGothic.ttf');

}


그리고, 폰트를 NanumGothic으로 지정해 준다.

body {

font:13px/1.8 NanumGothic;

{


※ 관련 글 모음 ▼



2. 인터넷 업체가 제공하는 웹폰트를 사용하는 방법 (추천)


[ 한글 1 : 폰트페이스 ]


 
 + 지원하는 무료 웹폰트
   - 나눔고딕
   - 나눔고딕(굵게)
   - 나눔명조
   - 나눔명조(굵게)
   - 나눔손글씨 펜체
   - 나눔손글씨 붓체

 

 + 장점
   - 쉬운 적용 방법
   - 빠른 로딩 속도
   - 대부분의 주요 브라우저 지원




사용법 : style.CSS에서 폰트를 NanumGothic로 지정하고, 아래의 코드를 skin.html에서 <head> ~ </head> 사이에 넣는다.

<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load( "webfont", "1" );
google.setOnLoadCallback(function() {
  WebFont.load({ custom: {
  families: [ "NanumGothic" ],
  urls: [ "http://fontface.kr/NanumGothic/css" ]
 }});
});
</script>
</head>





[ 한글 2 : 모빌리스 웹폰트 서비스 ]


 
 + 지원하는 무료 웹폰트 1
   - 나눔고딕 가늘게
   - 나눔고딕
   - 나눔고딕굵게
   - 나눔명조
   - 나눔명조 굵게
   - 나눔손글씨 붓
   - 나눔손글씨 펜 

 
 + 지원하는 무료 웹폰트 2
   - 혜움글꼴
   - 은글꼴1
   - 은글꼴2
   - 백묵글꼴
   - 렉시글꼴
   - 은진글꼴
   - 드로이드

 
 + 장점
   - 쉬운 적용 방법
   - 빠른 로딩 속도
   - 대부분의 주요 브라우저 지원 



사용법 : style.CSS에서 폰트를 NanumGothicWeb로 지정하고, 아래의 코드를 skin.html에서 <head> ~ </head> 사이에 넣는다.

<head>

    <link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumBrushWeb' rel='stylesheet' type='text/css' />

    <link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb' rel='stylesheet' type='text/css' />  

</head>



[ 영문 : 구글 웹 폰트 ]

사용법 : 다음의 사이트 참조

 http://www.google.com/webfonts

 https://developers.google.com/webfonts/docs/webfont_loader



구글 웹 폰트에 접속


마음에 드는 폰트를 고른다. 잘 모르면 가장 인기있는 녀석을 선택한다. 

그리고 Quick-use를 클릭!



폰트 사용방법이 나온다. 1번, 2번을 읽어 본다. 1번에서 원하는 스타일을 선택한다. (이미 Normal 400이 선택되어 있을 것이다.)

3번과 4번의 방법으로 웹페이지나 블로그에 적용해 주면 된다.


3. Add this code to your website: 항목에 3가지의 탭이 있다.


 + Standard

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>


 + @import

@import url(http://fonts.googleapis.com/css?family=Open+Sans);


 + Javascript

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>



코드를 적용할 3가지 방법이 있는데 Standard 방법을 사용해 보겠다.


skin.html : <head>와 </head> 사이에 적당히 다음 줄을 넣어준다.

<head>

   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

</head>



4. CSS 수정


font-family: 'Open Sans', sans-serif;


style.css : 본문에 해당하는 .article을 찾아서, 폰트 정보를 넣는다.

블로그 스킨 종류에 따라 이름이 다를 수 있다. 지금 사용하는 스킨에서는 .desc로 되어 있다.

.article {

font-family:'Open Sans', sans-serif;          /* 폰트 종류 */

font-size:13px/;                                           /* 폰트 크기 */

color:#5f5f5;                                                  /* 폰트 색 */

line-height:2;                                                /* 줄 간격 */

}







웹폰트 실제 적용한 예 


◀ NanumGothicWeb          NanumBrushWeb ▶






P.S. 폰트를 만들고 싶어 졌다 

 - 폰트 만들기         http://blog.naver.com/PostView.nhn?blogId=appelboem&logNo=30098368998

 - 손 글씨체 만들기  http://bluepaprika.tistory.com/280




댓글을 달아 주세요