구글 웹폰트 적용 방법

자신의 설치형 블로그에 구글에서 제공하는 웹폰트 적용 법입니다. 먼저 https://www.google.com/fonts에 접속 후 원하는 폰트를 찾습니다.

혹은 www.google.com/fonts/earlyaccess에서 새로운 웹 폰트를 볼 수 있습니다.

Earyaccess에서는 

"Hanna, Jeju Gothic, Jeju Hallasan, Jeju Myeongjo, KoPub Batang, Nanum Brush Script, Nanum Gothic, Nanum Gothic Coding, Nanum Myeongjo, Nanum Pen Script, Noto Sans KR" 처럼 한글 웹 폰트도 있습니다.

Earyaccess에서는 @import 코드만 제공하고 있어서 이곳의 폰트를 이용한다면 3번 글부터 보면 됩니다.

위의 스샷처럼 원하는 폰트를 찾고 Add to Collection을 누릅니다. 그 후 Use 클릭

1. 원하는 굵기나 스타일등 해당 폰트가 가지고있는 여러가지 스타일중 사용할 스타일을 채크합니다.

2. 원하는 언어를 선택합니다.

3. Standard와 Javascript는 HTML 파일의 </head> 위쪽에 넣어주고 @import의 경우 *.CSS파일의 맨 윗줄에 삽입합니다. 꼭 맨 윗줄이 아니어도 상관은 없습니다. 꼭 세 가지 방식 중 한 가지만 선택해서 설치해야 합니다.

Standard - index.html or index.php (wordpress header.php) </head>위에 위치해야 합니다.

    <!-- befor after START-->
<script src="http://jktuts.com/attachment/cfile9.uf@2647584856DC1FDA2646CD.js"></script>
<script src="http://jktuts.com/attachment/cfile6.uf@245AAD4856DC1FD810EDB8.js"></script>
<script src="http://jktuts.com/attachment/cfile25.uf@275B5C4856DC1FD712130A.js"></script>
    <!--END-->
 
<!--Google Fonts Link Start-->
    <link href='https://fonts.googleapis.com/css?family=
Open+Sans:400,300,300italic,400italic|Source+Sans+Pro' rel='stylesheet' type='text/css'>
</head>

@import - style.css (해당 css에 적용 합니다.)

@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic|Source+Sans+Pro);
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0}
fieldset,img{border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}

Javascript - index.html or index.php (wordpress header.php) </head>위에 위치해야 합니다.

    <!-- befor after START-->
<script src="http://jktuts.com/attachment/cfile9.uf@2647584856DC1FDA2646CD.js"></script>
<script src="http://jktuts.com/attachment/cfile6.uf@245AAD4856DC1FD810EDB8.js"></script>
<script src="http://jktuts.com/attachment/cfile25.uf@275B5C4856DC1FD712130A.js"></script>
    <!--END-->
<!--Google web font Start-->
<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans:400,300,300italic,400italic:latin', 'Source+Sans+Pro::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://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>
</head>

4. 웹폰트를 적용 할려면 자신의 CSS 원하는곳에 해당 폰트 설정을 하면 됩니다.

style.css

body,th,td,input,select,textarea,button에 산스프로 폰트를 사용한다는 코드 입니다.

적용 할땐 블로그에 맞게 적용 하면 됩니다.

body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family: 'Source Sans Pro', sans-serif;}
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:underline}
a:active {background-color:transparent}z

질문은 댓글로 남겨주세요