티스토리 웹폰트 적용

요즘 Wordpress 가 급 땡기긴 하지만 서버 운영이랑 디자인 새로 하는데 시간을 투자하기 힘들어서,
당분간 그냥 티스토리 쓰는 걸로...

 

웹폰트하면 나눔글꼴이지. 하지만 이제 좀 질린다고 해야 하나.
서핑하다 구글의 Noto 폰트를 발견했다. 한국어도 완벽한 것 같고.
Noto 는 구글이 개발한 오픈 소스 폰트 패밀리이다.
컴퓨터에서 표시 못하는 문자를 사작형(ㅁ)으로 표시하곤 하는데 구글이 이를 "두부"(tofu) 라고 부르며,
웹에서 이를 없애기 위해 만든 이름이 Noto(No Tofu) 이다.

 

 

1. woff 파일 다운로드

 

https://www.google.com/fonts/earlyaccess
Early Access 페이지에 방문하면 구글에서 제공하는 많은 웹 폰트들의 링크/소스가 있다.
그 중에서 맘에 드는 폰트를 다운받으면 되는데, 링크를 가져가는 것 보다는 링크 속의 파일을 직접 다운받아
본인의 사이트에 적용하는 것이 조금은 귀찮지만 속도면에서는 훨씬 나을 것이다.
Noto 의 한국어 버전의 이름은 Noto Sans KR (Korean) 이다.

 

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

 

위에서 처럼 링크가 있는데 링크를 다운받아 보면 폰트 파일의 위치를 알 수 있다.

 

/*
 * 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: 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');
 }

 

위 주소에서 원하는 woff 파일들을 모두 다운받는다.

 

폰트 두께 별로 7가지 (thin, light, black, ...)가 있는데 otf 파일을 받으면 실제 글꼴을 확인할 수 있다.
난 그 중 2가지만 사용하려고 한다. regular, bold (한 개당 용량이 1MB 쯤 됨.)

 

 

2. woff 파일 업로드 / CSS 적용

 

우선 다운받은 파일들(woff, woff2)을 본인의 사이트나 블로그에 올린다.
티스토리에서는 관리자 - HTML/CSS 편집 - 파일올리기 에서 올리면 된다.
올리고 css 파일을 수정한다.

 

@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 400;
   src: url(./NotoSansKR-Regular.woff2) format('woff2'),
        url(./NotoSansKR-Regular.woff) format('woff');
 }
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 700;
   src: url(./NotoSansKR-Bold.woff2) format('woff2'),
        url(./NotoSansKR-Bold.woff) format('woff');
 }

 

font-face 정의하고 페이지 전체나 적용을 원하는 곳에 font-family : 'Noto Sans KR' 만 적용하면 끝.