티스토리 초보 블러거들을 위한 폰트 바꾸기

 

블러거들의 커뮤니티인 블로거머니의 한 회원께서 요청하신 자료입니다.

 

그래서 간단~~히 만들어 보았으니, 참고 해주세요.^^

 

네이버와 싸이 블로그와는 달리 티스토리에서 글꼴을 바꾸려면 좀 복잡합니다.

 

그러나 방법만 알면 10분도 안 걸린다는..(... 많이 걸리나요? ㅋㅋ) 10분이란 시간이 짧다면 짧고, 길다면 긴 시간입니다. 저는 요새 하도 스킨을 뜯었다 고쳤다 해서.. 어떤 스킨이던지 사이드바나 폰트 바꾸기, 광고 배치까지.. 10분도 안 걸린다는..

 

블로그를 제대로 해보시려면 시간을 많이 투자하셔야 하는건 기본입니다. 기본! 어렵다 생각하지 말고 도전 정신이 중요합니다.

 

그리고 이 작업을 하기 이전에 혹시 모를 사태를 방지하기 위하여, 스킨을 미리 백업하시는 것이 좋습니다.

 

스킨 저장은,.

 

 

티스토리 관리자 메뉴에 들어가면 좌측에 스킨 메뉴가 있습니다. 클릭하고, 우측에 숨어 있는데 ▼를 누르면 위와 같이 스킨 저장과 파일 업로드 등의 메뉴가 나타나게 됩니다. 거기서 스킨저장을 꾹~ 누르시고 이름과 함께 저장하시면 되구요. 일단 스킨 백업이 되었다면 적용하고 싶은 글꼴을 받습니다. 확장자가 eot이어야만 티스토리에 직접 업로드 하여, 폰트를 다운로드 받는 시간이 줄어들어 블로그 로딩시간도 짧아지게 됩니다. 구글 폰트의 소스를 적용시켜서 하는 방법도 있지만.. 가끔 가다 느려지는 경우가 있어서 비추!

 

일단 확장자가 eot 인 폰트 파일을 찾습니다. 웹에서 검색해서 다운로드 해놓으시고, 여기에서는 나눔 고딕 폰트를 적용하는 예로 들겠습니다.

 

나눔고딕 폰트가 없으신 분은

NanumGothic.eot

 

위에서 받으시고요~

 

받으셨다면 다시 관리자 메뉴의 스킨으로 갑니다. 아까 스킨저장할 때 보이던.. 파일 업로드가 있죠? 거기에다 위에서 받은 나눔고딕 폰트 파일을 업로드 시킵니다.

 

하셨나요?

 

그럼 준비는 다 끝났습니다.

 

style.css에서 소스를 좀 추가하고 바꾸면 됩니다.

 스킨을 바꿀 때 skin.html과 style.css를 많이 바꿔야 할테니 처음 보시는 분들은 너무 이것저것 하시는 것보다 한 부분 수정하고, 미리보기를 통해 어떻게 바뀌었나 확인해보는 습관을 들이셔야 합니다.^^

 

아무튼.. style.css에서 위의 빨간색 박스처럼 소스를 추가해야 합니다. 아래 소스를 받아 style.css 가장 위에 붙여넣으시고,

소스.txt

여기서 끝이 아닙니다.

 

그리고 위에 파란 박스처럼 nanum 이라고 되어 있죠? 그 부분에는 원래 돋움이나, gulim 등의 폰트가 있던 곳입니다. 그런 폰트를 nanum으로 바꾼 것이죠.

 

위 소스에서 붙여넣은 내용을 살펴봐 보세요. 아까 업로드 시킨 나눔고딕 eot 파일이 있죠? 그것을 nanum이란 이름으로 쓰겠다는 것입니다.(쉽게 말하면요~)

그럼.. 기본으로 적용된 폰트들을 nanum으로 바꾸면 되겠죠? 이것을 일일이 바꾸려면.. 눈도 아프고 시간도 많이 걸립니다. 이럴 때 필요한 것은? 워드의 바꾸기 기능! 한글이나, 워드를 열고!

 

style.css 소스를 복사하여 붙여 넣습니다.

 

그런 후.. 'font'라고 검색합니다. 그러면 font 뒤에 폰트 이름들이 계속 나올 겁니다. 그 폰트 이름을 nanum으로 바꿔줍니다. 사용된 기본 폰트는 한 두개가 아니라.. 5개 정도는 됩니다. 제가 알고 있는 것은.. 스킨에 따라 폰트명이 조금씩은 다른데 돋움, dotum, 굴림, gulim, applegothic, sans-serif, arial, verdana 등이 있습니다. 이것 외에도 있을 수 있으니 꼼꼼히 바꿔주셔야 바뀝니다.

기본폰트를 다 nanum으로 바꾸셨다면.. 폰트는 다 바꾼 거구요. 여기에서 가독성을 위해 크기를 조금씩 올려줍니다.  그러기 위해선 다시 style.css의 내용을 복사하여 워드에 붙여넣기 하고 검색을 합니다. 이번에는 'font:10px' 부터 합니다. 뒤에 10px는 폰트 크기가 10px이라는 것인데 10~12 정도로 설정이 되어 있을 건데.. 자신이 맘에 드는 수치로 정합니다. 너무 크면.. 또 이상하니까 최대 13정도까지 해줍니다.

style.css를 처음 보는 분들이라면, 컴퓨터를 전공하신 분이 아닌 이상 이런 소스는 처음이실 건데요.. 많이 봐두셔야 나중에 스킨 작업하실 때도 쉽게 하실 수 있습니다. 그래도 간략한 주석처리는 되어 있어서 이 코드는 어떤 부분을 위한 것이다. 라고는 짐작하실 수 있습니다.^^

 

여기까지가 이번 포스트의 전부입니다. 도움 되셨다면 한번씩 눌러주시고, 이만 다음 글에서 더 좋은 정보로 찾아 뵙도록 하겠습니다.^^