티스토리 폰트 나눔고딕, 나눔브러시 추가

티스토리 폰트 나눔고딕, 나눔브러시 추가

 

티스토리 본문 내용의 줄간격을 조정하다가 보니, 이번에는 폰트를 바꾸어 보고 싶은 욕심이 나네요. 기존에 사용하던 본문 폰트는 '맑음 고딕' 인데, 특별하게 거슬리는 것은 없지만, 나눔고딕 가독성이 매우 좋은 듯 싶어 바꾸어 보려고 합니다. 약간 아쉬운건 모바일 환경은 수정이 불가능하게 되어 있더군요. 뚝딱 반응형 스킨으로 바꾸어 보고 싶지만, 생각보다 이것 저것 손을 봐야 해서 그냥 기본 모바일 스킨을 사용하고 있답니다. 그럼 어떻게 티스토리 폰트를 바꾸어서 표현이 가능한지 살펴볼까요?

 

티스토리 폰트 수정하기

 

티스토리 블로그 본문의 폰트를 바꾸는데에는 여러가지 방법이 있죠. 우선 가장 쉬운 방법은 편집창에서 설정을 하는 경우인데, 이경우 지정된 폰트 이외에는 바꾸기 어렵다는 단점이 있습니다. 다음으로는 스킨위자드를 통해서 쉽게 설정을 할 수 있는데, 그냥 원하는 폰트가 있는 것이 아니라 티스토리 스킨의 CSS를 수정해야 합니다. 가장 많이 하시는 CSS 수정에 대해서 잠시 설명을 드릴까 합니다.

 

폰트는 내컴퓨터에 기본적으로 설치가 되어 있는 녀석만 인식을 하게 되어 있습니다. 거의 기본 폰트는 동일하지만, 내가 티스토리에서 구현하고자 하는 폰트를 표현하는데에는 사용자의 컴퓨터에 해당 폰트가 없는 경우는 그냥 디폴트 폰트로 변환이 되어 버립니다. 이런 경우에는 아무리 이쁜 폰트를 사용해서 꾸며 놓았다 하더라도, 다른 PC로 글을 읽는 분들은 그 폰트가 없기 때문에 그냥 굴림, 돋음 등과 같은 글꼴로 표현이 되는 것이죠. 이런 이유로, 티스토리에 있는 업로드 기능을 통해서 내가 원하는 폰트 파일을 업로드 시켜서 인식을 하기도 합니다. 저는 이방식 보다는 웹상에 있는 폰트 파일을 이용해서 불러오는 형태로 구성을 해보려고 합니다.

 

티스토리 스킨에 폰트의 종류를 지정하는 CSS 부분은 생각보다 많습니다. 실예로 스킨의 구조가 헤더, 본문, 사이드바, 풋터로 구분을 한다고 하면, 이 영역에 대한 이해가 있어야  해당하는 부분의 폰트 적용을 바꿀 수 있답니다. 물론, 포스팅 하는 부분은 본문 부분에 해당이 되므로, '포스트' 나 'article' 검색(Ctrl+F)을 통해서 해당 CSS 부분을 수정하는 방식으로 하시면 편리합니다. 바꾸어줄 부분은 바로 'font - family' 부분을 찾아서 추가를 원하는 폰트를 입력해 주어야 합니다.

 

 

나눔고딕, 나눔브러시 구글폰트(google font)

 

나눔고딕(nanumgothic)과 나눔브러시(nanumbrushscript)는 네이버에서 무료로 배포하고 있는 폰트 중에 하나입니다. 나눔고딕은 본문에, 나눔브러시는 제목에 적용을 하면 좋겠다 싶어서 구글폰트를 어떻게 적용을 할 수 있을까 검색을 해보았답니다.

 

 

구글폰트 바로가기

 

구글검색을 해보면, 위와 같이 구글 폰트 페이지가 있어서 나눔고딕과 나눔브러시를 찾아 보았답니다.

 

 

나눔브러시는 손글씨 형태로 개인적으로 제목에 적합한 글꼴이라고 생각이 됩니다.

 

[네이버 나눔브러시]

 

 

 

 

 

나눔고딕은 깔끔한 고딕체의 글씨로 가독성이 좋아서 많은 분들이 사용을 하고 있죠. 사실 나눔바른고딕을 구글폰트로 연결을 하고 싶었지만, 구글폰트에 아직 나눔바른고딕이 지원이 되지 않네요. 일단 나눔고딕으로 셋팅을 해보렵니다.

 

[네이버 나눔고딕]

 

 

 

티스토리 CSS 편집은

 

[관리자 모드] -[꾸미기]-[HTML/CSS편집]

 

으로 들어가면 됩니다.

 

 

 

구글폰트를 티스토리 CSS 넣기

 

 

CSS 첫열에 나오는 @charset "utf-8"; 다음에 폰트를 임포트 할 수 있는 명령어를 몇줄 넣어 줍니다.

/*구글폰트(나눔고딕-본문)*/
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/*구글폰트(나눔브러시-제목)*/
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

 

임포트 까지는 쉽사리 되는데, 다음 부터는 조금 어려워지기 시작합니다. 기본 폰트에서 변환을 하고자 하는 부위를 정확하게 알고 있어야 하는데, 스킨마다 구성이 조금씩 다르기 때문에 어디를 바꾸어야 할지 조금 혼선이 있기 때문이죠. 저는 다른 곳은 그냥 나두고 본문의 제목(title) 과 포스트의 article 부위를 수정했답니다.

 

수정해야 할 부분은 바로 위에 설명드린 font-family 부분.

 

 

구글폰트로 부터 임포트 했다면, 사용할 폰트를 지정을 해주어야 하겠죠. body { 코드가 시작되기 전, font-family에 나눔고딕, 나눔브러시를 추가해 주면 되는데요, 여기서 주의할 점은 바로 띄어쓰기입니다. 코드가 영문으로 되어 있는데, 띄어쓰기를 하지 않으면 구글폰트를 불러오지 못하네요.

 

 

 

nanumgothic - > nanum gothic 

nanumbrushscript -> nanum brush script

 

다음은 타이틀 부분입니다. 타이틀(title) 부분은 나눔 브러시 스크립트를 영문으로 입력 해줍니다.

 

 

 

이번은 본문입니다.  .article 부분을 찾아 font-family 부분에 나눔 고딕을 영문을 입력해줍니다.

 

 

 

해당부분을 변경을 해주고 나면 위의 그림과 같이 타이틀과 본문의 폰트가 변경이 된답니다. 조금 더 사용을 해보면 눈에 잘 나오는지 확인이 가능할 듯 보입니다. 나눔 고딕도 상당히 눈에 잘 띄이는 것 같아 개인적으로 마음에 드네요.