티스토리 블로그 본고딕 웹폰트 적용법

 티스토리 블로그를 하다보면 네이버와는 다르게 정말 다양한 형태와 레이아웃의 블로그들을 볼 수 있습니다. 그게 나름의 매력이기도 하는데 그러기 위해서는 내가 스킨을 만들거나 다른 사람이 만들어 준 스킨을 사용하는 방법이 있는데 나 같은 경우는 아직 스킨을 만들정도의 실력을 갖추지는 못한 것 같어서 현재 Daisy (http://daisy.pe.kr/) 님의 스킨을 사용하고 있는데 개인적으로 아쉬운 부분들은 내가 직접 수정해 사용하는 편인데요.

 최근에 신경이 쓰였던 부분은 웹에서 내 블로그가 보여질 때 많은 부분을 편하게 볼 수 있게 만들고 싶었고 그것의 영향으로 폰트 사이즈를 기존보다 많이 줄여보았습니다. 그랬더니 나눔고딕을 기본 폰트로 장착하고 있는 스킨 같은 경우에는 글씨의 가독성이 많이 떨어진다 생각이 들었는데요. 그래서 어떤 폰트로 바꾸는 것이 좋을까 고민하던 찰나에 나눔고딕보다는 본고딕이 적합하다는 생각을 하고 적용을 시작하게 되었네요.

△ 구글의 폰트 프로젝트 중 하나인 본고딕

 폰트에 관한 기본지식이 없던 나였기에 처음에 헤매었던 부분은 도대체 생각보다 큰 용량의 폰트를 어떻게 내 블로그에 적용시킬것인가에 대한 고민이들었는데요. 저건 전체폰트 사이즈이고 Noto Sans CJK 버전을 적용시킨다고 해도 100메가가 넘어서 막막하기만 하던 찰나에 다양한 시도를 통해서 적용시킨 능력자분들을 알게 되었고 박수를 치던 찰나에 이런 고민을 할 필요가 없는 정보를 발견하게 되었습니다.

△ 본고딕의 웹폰트 지원 발표

 15년 10월부터 구글폰트 얼리엑서스(Google Fonts Early Access)를 통해 본고딕의 웹폰트를 지원한다는 사실을 알게 된 것이다. 아니 내가 하루종일 검색했던 이유는 뭐지... (역시나 이런 정보는 구글로 검색해야 한다는 사실을 다시 한번 깨닫게 되었네요.

 정말 쉽습니다. 티스토리에 적용하기 위해서는 HTML/CSS 편집에 먼저 들어가고요.

 준비물로는 지금 보시고 계시는 블로그만 있으면 됩니다. 그리고나서는 CSS 영역만 건들여주시면 되는데요.

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

-> 이건 CSS 가장 최상단에 추가해주시면 됩니다. 바로 본고딕 폰트를 사용하기 위한 준비를 한다고 생각하시면 될 것 같어요.

'Noto Sans KR', sans-serif

-> 이건 모든 폰트 영역 가장 첫단으로 옮겨주시면 되는 부분입니다.

 제가 위에 써놓은 import 구문을 CSS에 최상단에 추가 해주시면 됩니다. 저 같은 경우는 여러 테스트를 위해서 기존에 추가되어 있는 나눔고딕 웹폰트 구문을 주석처리 해주었는데요. 그걸 할 필요는 없습니다.

 그러고 나서는 font-family를 검색하여 제일 앞 부분에 'Noto Sans KR', sans-serif를 추가 해주시면 된다고 나와 있습니다만 저 같은 경우는 저부분만 바꿔주니 전체 적용이 잘 되지 않더라고요. 그래서 'Nanum Gothic'을 검색하여 나눔 고딕 폰트 앞 부분에 전부 저와 같은 소스를 추가해주었습니다.

 이런식으로 말이지요. 그리고 보면 폰트의 굵기정도를 확인하실 수 잇는데요. 기존의 Noto Sans 즉, 본고딕의 경우에는 7가지의 굵기로 표현되어 있습니다. 하지만 본고딕 웹폰트는 6가지 스타일로 제작되어 있음을 확인할 수 있습니다.

 변경 방법은 간단합니다. font-weight를 바꿔주면 되는데요. 제 블로그의 본문은 기본인 500 제목같은 경우는 700 정도로 가중치를 주고 있으니 참조하시길 바라겠습니다. 혹시 바꾸시면서 궁금하신점이 있으시면 언제든 댓글 남겨주세요. 그럼 이만