홈페이지를 개발하면서 누구나 한번쯤은 폰트문제로 고민한 경험이 있을텐데 반갑게도 지난 7월 ‘본고딕’이라는 오픈소스 글꼴이 태어났다.
구글과 어도비가 손잡고 한중일 3개국어를 모두 자유롭게 쓸 수있도록 새롭게 공개한 글꼴로서 구글은 ‘노토산스CJK’로 어도비는 ‘본고딕’으로 부른다.
양사에서 따로 개발하다가 구글의 적극적인 비용지원으로 무료 오픈소스로 탄생하게 되었다고 한다. 역시 구글~
우리나라 서체 개발에는 ‘산돌커뮤니케이션’이 참여했는데 그래서인지 산돌체와 많이 비슷한 느낌이다.
예전에 나눔글꼴이 처음 무료로 나왔을 때 서체 라이센스 문제로 고민이 많던 웹디자이너나 그래픽디자이너들이 너나 할것 없이 모두 나눔체로 디자인된 인쇄물이 쏟아냈던걸 보면 이번에는 본고딕이 그 뒤를 이을 것으로 보인다.
특히 본고딕 글꼴은 단순히 bold 지원만이 아닌 7가지 굵기를 지원한다.
구글 Noto Fonts 페이지에서 나라별 언어를 받아서 설치할 수 있다.

본고딕

 

본고딕 다운받는 곳

구글 : http://www.google.com/get/noto/
어도비 : http://blog.typekit.com/alternate/source-han-sans-kor/

NotoSansCJKKR
 360M가 넘는 용량이므로 한글서체만 다운받으려면 하단 리스트에서 Noto Sans CJK KR만 다운받아도 된다.

 

Noto Sans CJK KR

Specimens

Thin 100
noto-sans-kore_ko_100_normal

Light 300
noto-sans-kore_ko_300_normal

DemiLight 350
noto-sans-kore_ko_350_normal

Regular 400
noto-sans-kore_ko_400_normal

Medium 500
noto-sans-kore_ko_500_normal

Bold 700
noto-sans-kore_ko_700_normal

Black 900
noto-sans-kore_ko_900_normal

Language coverage : Korean

 

본고딕 웹폰트 적용 방법

Noto Sans (본고딕) 서체가 정식 구글웹폰트이긴 하지만 구글 폰트사이트에서 설명하는 적용방법대로 여러가지 테스트를 해보았는데 아직 반영되지 않는다.
구글이 공개한 노트산스의 한국어판 용량이 너무 커서 early access 같은 지원을 아직 고민중인 것으로 보인다.
홈페이지에 반영을 원한다면 당분간은 브라우져별로 지원되는 서체를 종류별로 직접 다운받아 서버에 올려놓는 비동기 방식으로 구현해야 할 것 같다.

1. html 코드 추가 방식
 가장 Standard 형태임. 인클루드 되는 소스파일을 열고 head에 추가하면 된다.


<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>


 
 2. CSS 적용 방식
import 코드를 사용해서 아래와 같이 CSS 파일에 코드를 추가한다.

@import url(http://fonts.googleapis.com/css?family=Noto+Sans);


 
 3. Javascript 방식
 인클루드 되는 head 파일에 아래와 같이 자바스크립트 구문을 추가한다.

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://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>


 
 4. 웹폰트 직접 로딩방식
 웹폰트를 다운받아 서버에 올려 놓고 css에 소스 경로를 추가해준다.
이러한 비동기방식은 브라우저가 웹폰트를 다운받은 후 다시 텍스트를 렌더링하므로 일부 브라우저에서 깜박임 현상이 있다.
 * ttf파일 다운받는곳 : http://www.1001freefonts.com/noto_sans.font
@font-face{
 font-family:hansans;
 src:url('/webfont/SourceHanSans-Regular.eot');
 src:local(※),
 url('/webfont/SourceHanSans-Regular.woff') format('woff');
 }

 
위 방식중 한가지로 반영하였으면 이제 실제로 원하는 곳에 스타일을 적용하면 된다.
body { font-family: 'Noto Sans', sans-serif; }

 

기타 한글 무료 웹폰트들

정식 구글웹폰트는 아니지만 early access로 구글에서 제공하는 무료 웹폰트들.
 (early access 폰트들은 이름만 추가해서는 동작하지 않으므로 소스경로까지 import 해야만 한다)

1. 하나체
Link : @import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
 Example : font-family: 'Hanna', serif;

2. 제주고딕
Link : @import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
 Example : font-family: 'Jeju Gothic', serif;

3. 제주한라산
Link : @import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);
 Example : font-family: 'Jeju Hallasan', serif;

4. 제주명조
Link : @import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
 Example : font-family: 'Jeju Myeongjo', serif;

5. KoPub 바탕체
Link : @import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);
 Example : font-family: 'KoPub Batang', serif;

6. 나눔 Brush
 Link : @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
 Example : font-family: 'Nanum Brush Script', serif;

7. 나눔 고딕체
Link : @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
 Example : font-family: 'Nanum Gothic', serif;

8. 나눔 고딕 코딩
Link : @import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
 Example : font-family: 'Nanum Gothic Coding', serif;

9. 나눔 명조체
Link : @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
 Example : font-family: 'Nanum Myeongjo', serif;

10. 나눔 Pen Script
 Link : @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
 Example : font-family: 'Nanum Pen Script', serif;

※ 중국, 대만, 일본 등 해외 무료 Early Access 폰트들도 확인하려면

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