홈페이지를 개발하면서 누구나 한번쯤은 폰트문제로 고민한 경험이 있을텐데 반갑게도 지난 7월 ‘본고딕’이라는 오픈소스 글꼴이 태어났다.
구글과 어도비가 손잡고 한중일 3개국어를 모두 자유롭게 쓸 수있도록 새롭게 공개한 글꼴로서 구글은 ‘노토산스CJK’로 어도비는 ‘본고딕’으로 부른다.
양사에서 따로 개발하다가 구글의 적극적인 비용지원으로 무료 오픈소스로 탄생하게 되었다고 한다. 역시 구글~
우리나라 서체 개발에는 ‘산돌커뮤니케이션’이 참여했는데 그래서인지 산돌체와 많이 비슷한 느낌이다.
예전에 나눔글꼴이 처음 무료로 나왔을 때 서체 라이센스 문제로 고민이 많던 웹디자이너나 그래픽디자이너들이 너나 할것 없이 모두 나눔체로 디자인된 인쇄물이 쏟아냈던걸 보면 이번에는 본고딕이 그 뒤를 이을 것으로 보인다.
특히 본고딕 글꼴은 단순히 bold 지원만이 아닌 7가지 굵기를 지원한다.
구글 Noto Fonts 페이지에서 나라별 언어를 받아서 설치할 수 있다.
본고딕 다운받는 곳
구글 : http://www.google.com/get/noto/
어도비 : http://blog.typekit.com/alternate/source-han-sans-kor/
360M가 넘는 용량이므로 한글서체만 다운받으려면 하단 리스트에서 Noto Sans CJK KR만 다운받아도 된다.
Noto Sans CJK KR
Specimens
Thin 100
Light 300
DemiLight 350
Regular 400
Medium 500
Bold 700
Black 900
Language coverage : Korean
본고딕 웹폰트 적용 방법
Noto Sans (본고딕) 서체가 정식 구글웹폰트이긴 하지만 구글 폰트사이트에서 설명하는 적용방법대로 여러가지 테스트를 해보았는데 아직 반영되지 않는다.
구글이 공개한 노트산스의 한국어판 용량이 너무 커서 early access 같은 지원을 아직 고민중인 것으로 보인다.
홈페이지에 반영을 원한다면 당분간은 브라우져별로 지원되는 서체를 종류별로 직접 다운받아 서버에 올려놓는 비동기 방식으로 구현해야 할 것 같다.
Noto Sans (본고딕) 서체는 이제 Google Fonts Early Access를 통해 제공되고 있다.
1. html 코드 추가 방식
가장 Standard 형태임. 인클루드 되는 소스파일을 열고 head에 추가하면 된다.
2. CSS 적용 방식
import 코드를 사용해서 아래와 같이 CSS 파일에 코드를 추가한다.
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
3. Javascript 방식
인클루드 되는 head 파일에 아래와 같이 자바스크립트 구문을 추가한다.
4. 웹폰트 직접 로딩방식
브라우저별 지원되는 웹폰트를 다운받아 서버에 올려 놓고 css에 소스 경로를 추가해준다.
이러한 비동기방식은 브라우저가 웹폰트를 다운받은 후 다시 텍스트를 렌더링하므로 일부 브라우저에서 깜박임 현상이 있다.
폰트를 굵기별로 100~900까지 모두 사용하면 용량문제가 있으므로 아래와 같이 필요한 굵기만 3,4개를 선택적으로 사용하는 것을 추천한다.
경량화된 한글 웹폰트를 만들어 개인적으로 제공하는 곳도 있으므로 필요하다면 검색을 통해 다운받아 사용하는것도 좋다.
* GitHub에서 다운받기 : https://github.com/UYEONG/NotoSans-subset
다운받은 파일을 서버에 올려놓고 경로와 파일명에 맞게 아래 코드를 css에 추가한다.
@font-face {
font-family: 'NotoKrL';
font-style: normal;
font-weight: 100;
src: local('Noto Sans Light'), local('NotoSans-Light'), url(/fonts/NotoSans-Light.eot);
src: url(/fonts/NotoSans-Light.eot?#iefix) format('embedded-opentype'),
url(/fonts/NotoSans-Light.woff2) format('woff2'),
url(/fonts/NotoSans-Light.woff) format('woff');;
}
@font-face {
font-family: 'NotoKrR';
font-style: normal;
font-weight: 300;
src: local('Noto Sans Regular'), local('NotoSans-Regular'), url(/fonts/NotoSans-Regular.eot);
src: url(/fonts/NotoSans-Regular.eot?#iefix) format('embedded-opentype'),
url(/fonts/NotoSans-Regular.woff2) format('woff2'),
url(/fonts/NotoSans-Regular.woff) format('woff');
}
@font-face {
font-family: 'NotoKrM';
font-style: normal;
font-weight: 500;
src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(/fonts/NotoSans-Medium.eot);
src: url(/fonts/NotoSans-Medium.eot?#iefix) format('embedded-opentype'),
url(/fonts/NotoSans-Medium.woff2) format('woff2'),
url(/fonts/NotoSans-Medium.woff) format('woff');
}
@font-face {
font-family: 'NotoKrB';
font-style: normal;
font-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(/fonts/NotoSans-Bold.eot);
src: url(/fonts/NotoSans-Bold.eot?#iefix) format('embedded-opentype'),
url(/fonts/NotoSans-Bold.woff2) format('woff2'),
url(/fonts/NotoSans-Bold.woff) format('woff');
}
위 방식중 한가지로 반영하였으면 이제 실제로 원하는 곳에 스타일을 적용하면 된다.
body { font-family: 'Noto Sans KR', sans-serif; }
4번 직접로딩인 경우에는 굵기별로 지정한 명칭에 맞게 따로 지정해주면 된다.
body { font-family: 'NotoKrR', sans-serif; }
strong { font-family: 'NotoKrB', sans-serif; }
th { font-family: 'NotoKrM', 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
성락준
좋은글 잘 읽고 갑니다~
jeiny
잘보고 갑니다.~!!
jey
위 링크에 ttf 파일은 영문전용 파일입니다~~~~
gogo
k