나눔바른고딕 웹폰트 데모 및 다운로드

우리나라 웹사이트에서 가장 많이 쓰이는 웹폰트는 나눔고딕일 겁니다. 보기 좋고, 라이센스가 자유롭고, 구글에서 웹폰트 서비스를 하고 있고.

어디가나 비슷한 글꼴을 본다는 단점은 있으나, 마땅한 대안이 없습니다. 다른 웹폰트는 매끄럽지 않거나 가독성이 떨어지니까요.

그렇다면 나눔바른고딕은 어떨까요? 네이버에서 모바일에 최적화하여 만든 글꼴이니 웹에서 사용하기 좋은 글꼴이겠죠?

나눔바른고딕을 웹폰트로 사용하려면 글꼴 변환을 해야 하는데, 다행히도 이런 작업을 해서 제공해주는 곳을 발견했습니다.

https://github.com/hiun/NanumBarunGothic

웹에서 사용할 수 있게 변환된 글꼴은 다음의 링크에서 다운로드 받을 수 있습니다.

https://github.com/hiun/NanumBarunGothic/releases

CDN도 제공하므로 HTML 또는 CSS에 링크만 걸어 사용할 수도 있습니다.

아래는 CDN의 글꼴을 가져와서 사용한 간단한 예제입니다.

http://book.cmsfactory.net/etc/nanum-barun-gothic.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Google Korean Webfont</title>
    <style>
      @import url(https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css);
      body {font-family: "Nanum Barun Gothic"; line-height: 200%;}
      .a {font-size: 1.0em;}
      .b {font-size: 1.2em;}
      .c {font-size: 1.4em;}
    </style>
  </head>
  <body>
    <h1>나눔바른고딕</h1>
    <p class="a">없이 것인데 것은 수 못해. 팔을 기침 하는 수 그러나 블루 아이폰이 듯하였다. 연결해서 줄 새삼스러운 사막이다. 비가 대박의 기색을 하였다.</p>
    <p class="b">없이 것인데 것은 수 못해. 팔을 기침 하는 수 그러나 블루 아이폰이 듯하였다. 연결해서 줄 새삼스러운 사막이다. 비가 대박의 기색을 하였다.</p>
    <p class="c">없이 것인데 것은 수 못해. 팔을 기침 하는 수 그러나 블루 아이폰이 듯하였다. 연결해서 줄 새삼스러운 사막이다. 비가 대박의 기색을 하였다.</p>
  </body>
</html>

나눔고딕과 큰 차이는 느끼지 못하겠네요. 전문가에게는 수많은 차이점이 보이겠지요?

Category

Created on 2015-03-10 00:06 | Updated on 2017-07-05 21:21

Book