구글 웹폰트 사용하기 > html

구글 웹폰트 사용하기

작성일 17-02-14 18:22

페이지 정보

작성자서방님 조회 144회 댓글 0건

본문

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

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

대표적인 웹폰트 제공 사이트는 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)undefined;

글꼴을 사용할 수 있게 불러오는 코드입니다. 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)undefined;
      h1 {font-family: 'Hanna';}
    </style>
  </head>
  <body>
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
  </body>
</html>

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

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS | Google Fonts</title>
    <style>
      @import url(http://fonts.googleapis.com/earlyaccess/hanna.css)undefined;
      @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css)undefined;
      @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css)undefined;
      @import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css)undefined;
      @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css)undefined;
      @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css)undefined;
      .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>

댓글목록

등록된 댓글이 없습니다.