Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

구글 웹폰트 사용하기 본문

Web publishing/HTML & CSS

구글 웹폰트 사용하기

BeOne 2013. 12. 16. 16:28

웹폰트를 만들어서 사용하는 것보다 웹폰트를 제공하는 사이트를 이용하는게 훨씬 편합니다. 간단한 코드 몇 줄로 바로 적용시킬 수 있습니다.

대표적인 웹폰트 제공 사이트는 Google Fonts입니다. 600개가 넘는 웹폰트가 있으며, 누구나 무료로 사용할 수 있습니다.

http://www.google.com/fonts

하지만, 여기에는 영어 글꼴만 있습니다. 한글을 비롯한 영어 이외의 글꼴은 Google Fonts Early Access로 가야합니다.

http://www.google.com/fonts/earlyaccess

Ctrl+F로 찾기를 열고 Korean으로 검색합니다. 제일 처음 나오는 한글 웹폰트는 Hanna입니다.

글꼴 설명과 함께 두 줄의 코드가 있습니다.

@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);

글꼴을 사용할 수 있게 불러오는 코드입니다. CSS 코드 제일 위에 입력하면 됩니다.

font-family: 'Hanna', serif;

글꼴을 사용하는 예제 코드입니다. 글꼴 이름을 Hanna로 하면 글꼴을 사용할 수 있다는 뜻입니다.

간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Google Font</title>
    <style>
      @import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
      h1 {font-family: 'Hanna';}
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
  </body>
</html>

Google Fonts Early Access에는 현재 총 6개의 한글 글꼴이 있습니다. 위의 예제에서 사용한 하나 글꼴과 나눔고딕, 나눔고딕코딩, 나눔명조, 나눔손글씨붓, 나눔손글씨펜입니다.

각 글꼴을 한 번에 볼 수 있는 예제는 다음과 같습니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Google Fonts</title>
    <style>
      @import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
      @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
      @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.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);
      .hn {font-family: 'Hanna';}
      .nbs {font-family: 'Nanum Brush Script';}
      .ng {font-family: 'Nanum Gothic';}
      .ngc {font-family: 'Nanum Gothic Coding';}
      .nm {font-family: 'Nanum Myeongjo';}
      .nps {font-family: 'Nanum Pen Script';}
    </style>
  </head>
  <body>
    <h1 class="hn">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
    <h1 class="nbs">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
    <h1 class="ng">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
    <h1 class="ngc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
    <h1 class="nm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
    <h1 class="nps">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
  </body>
</html>




출처 : http://www.cmsfactory.net/node/10009

저작자표시

'Web publishing > HTML & CSS' 카테고리의 다른 글

IIS7 에서 woff MIME 등록하기.  (0) 2014.02.10
모바일 실제 해상도와 device-width  (0) 2014.01.28
디바이스별로 보는 사이트  (0) 2013.08.27
[css3] Gradient  (0) 2013.08.26
모바일 체크박스 변경 마크업  (0) 2013.06.13
'Web publishing/HTML & CSS' Related Articles more