본문 바로가기
블로그 Tip

티스토리 무료폰트 및 사이즈 변경 - 나눔고딕

by 일론마스크 2015. 4. 2.
반응형

티스토리 무료폰트 및 사이즈 변경 - 나눔고딕


사람들이 가장 편하게 읽을 수 있는 

즉, 가독성이 좋은 폰트와 크기는 어떻게 될까라는 호기심에 찾아 보았습니다.


블로그를 하다 보면, 이웃 블로그 방문들 많이 하시죠.


근데, 같은 글인데도 폰트로 인해 더 멋져 보이고 내용이 이해가 잘 될 때가 있죠.

그렇다고 무턱대고 폰트를 퍼가거나 하면 저작권에 위반 될 때가 있어요.

이미지에만 저작권이 있는 줄 알았는데, 폰트 에도 저작권이 있습니다.


또, 이런 경우도 있어요.

무료인 폰트가 유료로 변경되는 경우가 이에 해당 되죠.


그래서, 가장 안전한 네이버 에서 무료 폰트 다운 방법  알아 볼께요.





네이버에 있는 폰트가 다 무료폰트는 아니에요. 그래서, 꼭 무료폰트 탭을 눌러주시고 사용하세요.


네이버 무료폰트




네이버 나눔글꼴 저작권


네이버 나눔글꼴의 지적 재산권은 네이버에 있습니다.


네이버 나눔글꼴은 개인 및 기업 사용자를 포함한 모든 사용자에게


무료로 제공되며 자유롭게 수정하고 재배포하실 수 있습니다.

단 글꼴 자체를 유료로 판매하는 것은 금지하며,


네이버 나눔글꼴은 본 저작권 안내와 라이센스 전문을 포함해서

다른 소프트웨어와 번들하거나 재배포 또는 판매가 가능합니다. 



방법은 두가지가 있습니다.


첫번째,


무료 다운 폰트 적용


나눔고딕(NaumGothic.eot) 폰트를 예를 들어볼께요.


티스토리 관리자 HTML/CSS -> 파일업로드 -> 업로드




아래와 같이 style.css 파일의 가장 위에 글꼴 파일을 import 해주면 됩니다.


@font-face {font-family:나눔고딕; src:url(images/NanumGothic.eot)};

body{font-family:나눔고딕; font-size: 13px;}

div{font-family:나눔고딕; font-size: 13px;}


마지막으로, style.css 파일 중에서 font 혹은 font-family 항목 (이 값은 스킨마다 조금씩 다르다. 보통 body { 에서 찾는다) 을 찾아서 해당 내용의 font 를 Nanum Gothic 을 사용하겠다고 추가해 줍니다. 


예를 들면 아래와 같습니다. 


/* 본문 공통 */


body{

  font:11px/18px Nanum Gothic, Dotum, Tahoma, Verdana, AppleGothic, Sans-serif;

  color:#333;

  line-height:18px;

  padding:0px;

  margin:0px;





두번째,

구글 무료 웹폰트를 이용하는 방법


구글 무료 웹폰트 바로가기



Ctrl + F 하셔서 

Nanum Gothic 치시면 다음과 같이 나옵니다.



Link 부분에


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


위 문구를 복사하기 합니다.


티스토리 관리 -> HTML/CSS 편집 -> 하단란에 style.css


맨 윗 줄에 위에 복사하신 주소를 붙여 넣습니다.



굳이 설명 드리자면, 구글에 있는 나눔고딕 폰트를 티스토리로 임포트 하는 방식인데요,

원리는 웹페이지가 오픈 될 때 마다 폰트가 인터넷으로 자동 로딩 되는 방식입니다.


자~ 다하셨으면, 중요 포인트!


Ctrl + F 하셔서 font-family 를 찾아 줍니다.




위와 같이 바로 앞에,

Nanum Gothic 문구를 삽입을 해야 비로소 나눔고딕이 적용이 됩니다. 물론, 전체 페이지가 나눔고딕 으로 변경됩니다.


간혹, 혼동 하시는 분들이 있는데, 본인이 에디팅 할때는 기본인 돋움으로 표기 되지만 미리보기를 눌러 보시면 나눔고딕 으로 적용 되어진 것을 확인 할 수 있습니다.


자~ 이제 폰트 크기 고정에 대해 알아 볼까요?


티스토리 폰트 크기 고정


폰트 크기 고정 하는 법은 두가지 방법이 있습니다.


style.css

스킨위자드


style.css 방식


style.css 에서 ctrl + F 를 눌러서 post-body-font-size 를 검색 합니다.



문자 옆에 16px 라고 되어있네요. 저 숫자를 바꿔주면 기본 폰트 크기가 변경 됩니다.



스킨위자드 방식


꾸미기 -> 스킨 -> 스킨위자드 



게시글 글자색 하단에 보시면 글꼴 과 크기 변경 란이 있습니다.

크기변경란 에서 변경을 해주시면 게시글 크기가 일괄적으로 변하는걸 보실 수 있습니다.


난 왜 변경 적용 했는데 왜 아무것도 변하지 않지?


라고, 의문을 가지시는 분들도 계실거라 생각 됩니다.


참고로, 에디팅 에서는 변하는걸 볼 수 없고 

미리보기를 하셔야 적용 된 폰트 사이즈를 보실 수 있습니다.



개인적으론, 두 번째 방법을 권유 하고 싶습니다.



이상, 닥터울프

티스토리 무료폰트 및 사이즈 변경 였습니다~


본 포스팅이 많은 도움이 되길 바라겠습니다~

















반응형