구글과 어도비가 공동 개발한 본고딕(노토산스: Noto Sans) 한글이 드디어 구글에서 웹폰트로 등장했습니다. Noto 폰트는 구글과 어도비에서 공동으로 제작한 폰트로 전 세계의 언어를 대상으로 하고 있어서 엄청난 프로젝트입니다. 이는 폰트를 통한 비주얼 하모니(Visual Harmony)를 위한 것으로 그러자면 웹에서 이뤄져야 하기 때문에 글자 수가 적은 국가의 경우는 이미 제공됐지만 한국 및 중국, 일본의 경우는 한자를 사용하거나 글자 수가 많기 때문에 웹폰트로의 전환이 늦어졌습니다.
https://www.google.com/fonts/earlyaccess
위 링크로 이동하면 구글에서 제공하는 웹 폰트 목록이 있으며 Noto Sans로 검색하면 각 국가의 폰트를 볼 수 있습니다. 우리나라의 경우는 Noto Sans KR로 검색하면 됩니다.
Noto Sans KR (Korean)
Noto is a font family that aims to support all languages in the world. This is the Sans Korean family. It has Thin, Light, Regular, Medium, Bold and Black styles. For more information about Noto, go to google.com/get/noto
Noto Sans KR has been subsetted to cover the full repertoire of modern Hangul syllables (11,172) and most of symbols in KS X 1001. It also has the full support for Old Hangul with Unicode Hangul Conjoining Jamos and Opentype features. It does not have any Hanjas (Chinese characters) and Greek/Cyrillic letters. The full version can be downloaded in the link below. For more details, see Noto CJK Help.
Link
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
Example
font-family: 'Noto Sans KR', sans-serif;
SIL Open Font License, 1.1 | Download
사용 방법은 위 @import 규칙을 스타일시트 최상단에 배치하고 Example에 해당하는 스타일시트 속성과 값을 원하는 선택자에 추가하면 됩니다. 노토산스 한글 폰트는 총7개의 크기가 다른 폰트로 이뤄져 있는데 웹폰트로는 6종이 있습니다. 다음과 같이 크기에 따른 font-weight 속성을 설정해주면 됩니다.
/*
* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 100;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 300;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 500;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 900;
src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}즉 제목 글자에 보다 더 굵은 글자를 사용하고자 한다면 다음과 같이 설정하면 됩니다.
h1 {
font-family: "Noto Sans KR";
font-weight: 700;
}
구글에서 제공하는 본고딕 웹폰트는 필자가 제공한 웹폰트에 비해 용량이 커서 woff 버전이 1메가 바이트에 달합니다. 이는 필자가 만든 웹폰트는 한글 중 많이 쓰이는 2,350 개의 글자만 포함돼서 그렇고 구글의 웹폰트는 다른 한글 글자와 한자, 일본어가 포함돼서 그렇습니다. 따라서 용량이 크더라도 한자도 본고딕으로 표현하려면 구글 웹폰트를 사용하는 것이 좋습니다. 구글 웹폰트를 많은 사람들이 사용하면 사이트가 이동했을 때 같은 구글 웹폰트를 사용할 경우 다시 웹폰트를 로딩하지 않아도 되므로 오히려 속도가 빠릅니다.
알파벳 폰트는 노토 세리프 폰트도 있는데 CJK는 아직 없습니다. 아직 계획이 없다고 합니다. 어떤 모양으로 나올지 궁금해집니다.
