티스토리 블로그, 나눔 고딕 웹폰트 적용 방법

티스토리 블로그, 나눔 고딕 웹폰트 적용 방법

몽리, 꿈속으로 블로그에 네이버 나눔 고딕 폰트를 적용하였습니다. 구글 웹폰트로 말이죠. 왜? 방문자들의 편의를 위해 보다 글을 편하게 읽을 수 있도록 네이버 나눔 고딕을 웹폰트로 설정하였습니다. 블로그나 사이트 등 웹페이지에 설정한 폰트는 방문자의 컴퓨터에 해당 폰트가 설치되어 있을 경우에만 해당 폰트로 볼 수 있습니다. 웹페이지를 네이버 나눔 고딕 폰트로 설정하였더라도 방문자 컴퓨터에 네이버 나눔 고딕 폰트가 설치되어 있지 않다면 컴퓨터 혹은 브라우저에 설정된 기본 폰트로 보여지게 됩니다. 하지만 네이버 나눔 고딕 폰트를 웹폰트로 적용하면 방문자 컴퓨터에 네이버 나눔 고딕 폰트가 설치되어 있지 않더라도 네이버 나눔 고딕 폰트로 보여지게 됩니다. 같은 단어가 반복적으로 들어가니 어지럽군요. 여튼 네이버의 나눔글꼴은 오픈폰트이기에 블로그나 사이트 등 웹페이지에 제약 없이 자유롭게 사용할 수 있습니다.


나눔글꼴은 오픈폰트입니다

네이버의 나눔글꼴은 오픈폰트입니다. 저작권은 NHN에 있으나, 개인 및 기업 모두 무료로 사용할 수 있습니다. 네이버 나눔글꼴은 수정 및 재배포도 가능합니다. 보다 자세한 내용은 나눔글꼴 라이선스 전문을 확인하시고요. 최근 날짜 2016년 12월 6일의 ‘https://help.naver.com/support/contents/contents.nhn?serviceNo=1074&categoryNo=3497 네이버 나눔글꼴 라이선스 안내’를 확인하는 것이 더 좋겠군요.


나눔고딕

기존의 네이버 나눔글꼴(http://hangeul.naver.com/download.nhn)은 나눔 고딕, 나눔 명조, 나눔 손글씨 등이 있었는데, 다운로드 받아 컴퓨터에 설치할 수 있습니다. 최근 나온 나눔스퀘어, 나눔 바른펜, 나눔 바른고딕, 나눔 글꼴에코 등의 네이버 나눔글꼴들(http://hangeul.naver.com/2016/nanum)도 컴퓨터에 설치할 수 있습니다.


구글 폰트에서 Nanum Gothic 검색

네이버 나눔 글꼴을 웹폰트로 사용하고 싶다면, 구글 폰트로 이용할 수 있습니다. 구글 폰트 사이트 http://www.google.com/fonts/earlyaccess 로 이동 후 ‘Nanum Gothic’으로 검색하면 빠르게 찾을 수 있습니다. 만약 다른 네이버 나눔 글꼴들을 찾고 싶다면 ‘Nanum’ 혹은 ‘나눔’으로 검색하면 찾을 수 있을 겁니다. ‘Nanum Gothic’으로 검색하면 위와 같이 네이버 나눔 고딕 폰트가 나옵니다.

 

참고로 웹페이지에서 검색 기능을 이용하고 싶다면 브라우저에서 Ctrl+ F 키를 누르면 됩니다. 브라우저마다 위치가 약간 다르긴 하지만, 모든 브라우저에서 검색 기능을 이용할 수 있습니다. 크롬은 우측 상단에 검색 창이 뜨고, 파이어폭스는 좌측 하단에 검색 창이 뜹니다. 익스플로러는 거의 사용하지 않아 어느 위치에 뜨는지 모르겠네요.


나눔 고딕 웹폰트 소스

link 하단 회색 박스 안에 있는 소스 한 줄을 모두 복사한 후 해당 소스를 style.css 파일 최상단에 붙여 넣으면 됩니다. import 방식으로 사용해도 되고 link 방식으로 사용해도 되는데, 편한 방법으로 사용하면 되겠죠. 하지만 저는 import 방식을 추천합니다. 뼈와 살은 분리해야 관리가 편하니까요. 아래쪽의 Example 아래 있는 소스 부분이 폰트를 네이버 나눔 고딕으로 설정 하는 소스입니다.


나눔고딕 웹폰트 소스 삽입

티스토리 블로그에 나눔 고딕 폰트를 웹폰트로 적용하고 싶다면, 스킨 편집에서 css 탭을 열고 위에서 복사한 소스 한 줄을 제일 위에 붙여 넣으면 됩니다. 저장 버튼 클릭하면 블로그 스킨에서 네이버 나눔 고딕 폰트를 사용할 수 있습니다.


나눔고딕 폰트 변경

이제 스킨에서 네이버 나눔 고딕 폰트로 변경할 부분을 찾아 해당 부분의 폰트를 네이버 나눔 고딕으로 변경하면 됩니다.


CSS 수정

본문만 네이버 나눔 고딕으로 변경하고 싶을 경우엔 본문에 해당 되는 부분을 찾아 font-family를 Nanum Gothic으로 변경해주면 됩니다. 몽리 꿈속으로 블로그의 경우 본문이 <div class=”postarea”>본문</div>으로 되어 있기에 해당 부분 .postarea {스타일 소스} 안의 소스 내용 중 font-family를 Nanum Gothic으로 변경하였습니다.


Nanum Gothic으로 폰트 변경

font-family: 맑은 고딕,Arial,Tahoma,Verdana,sans-serif; 를

font-family: “Nanum Gothic”,”맑은 고딕”,”Malgun Gothic”,Arial,Tahoma,Verdana,sans-serif; 로 변경

 

참고로 위에서 말했지만 웹페이지에 적용된 폰트는 방문자 컴퓨터에 해당 폰트가 설정되어 있어야만 해당 폰트로 보여집니다. 해당 폰트가 설치되어 있지 않거나 다른 이유로 해당 폰트로 보여지지 않을 것을 대비하여 여러 개의 폰트를 설정합니다. 폰트는 입력한 순서대로 불러와 보여지기에 Nanum Gothic 폰트가 첫 번째로 보여지고 실패했을 때 맑은 고딕이 또 실패했을 때 Malgun Gothic으로 보여지게 됩니다. 입력한 순서대로 1순위, 2순위, 3순위로 말이죠.


기존에 사용하던 폰트

기존에 몽리 꿈속으로 블로그에서 사용하던 폰트입니다. 저는 이 폰트가 참 좋은데… 네이버 나눔 고딕 폰트가 가독성이 더 좋다고 말하는 사람들이 많아 변경했습니다.


네이버 나눔 고딕 폰트

네이버 나눔 고딕 폰트 적용해 보니 글씨 크기가 작아지더군요.


네이버 나눔 고딕 폰트

그래서 글씨 크기를 1px 늘렸습니다. 타이틀, 사이드바, 푸터 등 스킨 여기 저기 다 변경해야 하는데, 귀찮.. 그래서 일단은 본문만 네이버 나눔 고딕 폰트로 변경하고 마무리~ 끝~

Leave a Comment