CSS 강좌 | 구글 웹폰트 사용하기

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

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

https://fonts.google.com/

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

https://fonts.google.com/earlyaccess

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

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

@import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);

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

font-family: 'Nanum Pen Script', cursive;

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

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
      h1 { font-family: 'Nanum Pen Script', cursive; }
    </style>
  </head>
  <body>
    <h1>찬미를 위하여 그들은 열매를 되는 길지 교향악이다. 같이, 뜨고, 용기가 얼마나 청춘의 청춘의 사막이다.</h1>
  </body>
</html>

Google Fonts Early Access에는 2017년 5월 현재 총 11개의 한글 글꼴이 있습니다.

다음은 모든 한글 글꼴을 한 번에 볼 수 있는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      @import url(//fonts.googleapis.com/earlyaccess/hanna.css);
      @import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);
      @import url(//fonts.googleapis.com/earlyaccess/jejuhallasan.css);
      @import url(//fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
      @import url(//fonts.googleapis.com/earlyaccess/kopubbatang.css);
      @import url(//fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
      @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
      @import url(//fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
      @import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
      @import url(//fonts.googleapis.com/earlyaccess/nanumpenscript.css);
      @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
      p { font-size: 24px; }
      .hn { font-family: 'Hanna'; }
      .jg { font-family: 'Jeju Gothic'; }
      .jh { font-family: 'Jeju Hallasan'; }
      .jm { font-family: 'Jeju Myeongjo'; }
      .kb { font-family: 'Kopub Batang'; }
      .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'; }
      .ns { font-family: 'Noto Sans KR'; }
    </style>
  </head>
  <body>
    <p class="hn">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="jg">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="jh">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="jm">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="kb">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="nbs">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="ng">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="ngc">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="nm">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="nps">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
    <p class="ns">찬미를 위하여 그들은 열매를 되는 길지 교향악이다.</p>
  </body>
</html>

참고

Category

Created on 2013-10-31 01:16 | Updated on 2017-05-25 09:19

이 글을 공유하기

Kakao

Book navigation