티스토리(TISTORY) 입문 - 블로그 글꼴 변경하기(나눔고딕)

블로그를 잘 운영하려면 질 좋은 포스팅을 꾸준히 하는 것이 가장 중요하지만, 블로그의 시각적인 부분을 신경쓰는 것도 중요하다고 생각합니다. 블로그의 시각적인 부분은 크게 스킨과 글꼴로 나눌 수 있습니다. 보기가 편한 스킨과 글꼴을 선택하면 글의 가독성을 높여줄 뿐만 아니라, 정보가 깔끔하게 정리되어 정보의 접근성을 더욱 높여줄 수 있습니다.

어제 디자인이 좋은 스킨을 골라 블로그에 적용을 해봤으니, 이번에는 블로그의 글꼴을 변경해보았습니다. 변경할 글꼴은 대부분의 사람들이 사용하고 있는 네이버의 '나눔고딕' 글꼴을 선택했습니다. 개인적으로 가장 가독성이 좋은 글꼴이라고 생각합니다.

블로그 글꼴을 변경하는 방법에는 크게 세가지가 있습니다.

첫 번째는 HTML/CSS 편집에서 각각의 font-family를 수정하는 방법입니다. 이 방법은 블로그를 방문한 사용자의 컴퓨터에 해당 글꼴이 있어야 적용이 되고, 만약 해당 글꼴이 없을 경우엔 기본 글꼴로 보이게 됩니다. 페이지 로딩을 하지 않아 로딩 속도가 빠르다는 장점이 있지만, 블로그를 방문한 사용자가 해당 글꼴을 가지고 있지 않으면 무용지물인 셈이죠.

두 번째는 티스토리에 글꼴 파일을 업로드해서 변경하는 방법입니다. 이 방법은 블로그에 직접적으로 폰트를 설치하는 것이기때문에 블로그를 방문한 사용자의 컴퓨터에 글꼴이 설치되어 있지 않아도 해당 글꼴을 볼 수 있습니다. 하지만 스킨의 용량이 크게 증가할 수가 있고 스킨을 바꿀 때마다 일일히 글꼴을 다시 업로드해줘야 하는 번거로움이 있습니다. 또, 익스플로러에만 적용이 되고 크롬, 사파리 등의 기타 브라우저에서는 기본 글꼴로 보입니다.

세 번째는 구글 웹폰트를 이용하는 방법입니다. 이 방법은 구글 웹페이지 상에 올려놓은 글꼴을 사용하기때문에 블로그를 방문한 사용자의 컴퓨터에 글꼴이 설치되어 있지 않거나 인터넷 브라우저가 달라도 항상 해당 글꼴을 볼 수 있습니다. 블로그의 글꼴을 변경하는 방법 중 가장 간편하지만, 페이지마다 글꼴을 항상 로딩하여 적용하기때문에 로딩 속도가 조금 느린감이 있습니다.

위의 세가지 방법을 차례대로 설명해보겠습니다.

HTML/CSS 편집에서 font-family를 수정해서 변경하기

1.

먼저 컴퓨터에 나눔고딕 글꼴이 없으면, 다운로드를 해서 추가해줍니다.

2.

티스토리 관리자 페이지의 'HTML/CSS 편집' 을 클릭합니다.

3.

'HTML 편집' 에서 'Ctrl +F'를 눌러 검색창에 'font-family' 라고 입력합니다.

'font-family :' 의 뒷 부분에 기존 글꼴명이 적혀있는데, 'Nanum Gothic' 으로 변경해줍니다.

HTML 편집의 font-family 부분을 다 편집하면 'CSS 편집' 도 똑같이 변경해줍니다.

- 블로그 스킨마다 HTML이 달라서 HTML에 font-family가 없는 경우도 있습니다.

- font-family 부분을 모두 찾아서 적용해야 블로그 전체의 글꼴이 변경됩니다.

글꼴 파일을 직접 업로드해서 변경하기

1.

먼저 컴퓨터에 나눔고딕 글꼴이 없으면, 다운로드를 해서 추가해줍니다.

2.

티스토리 관리자 페이지의 'HTML/CSS 편집' 을 클릭합니다.

3.

'파일업로드' 로 이동하여 하단에 있는 '추가' 버튼을 클릭합니다.

NanumGothic.eot

'NanumGothic.eot' 파일을 추가한 다음 '저장' 버튼을 클릭합니다.

4. 

'CSS 편집' 로 이동하여 상단에 아래의 소스를 입력합니다.

@font-face {font-family:Nanum Gothic; src:url(images/Nanum Gothic.eot)};

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

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

글꼴 크기는 font-size: 13px 부분을 수정해주시면 됩니다.

- @font-face는 글꼴 파일을 HTML 속에 삽입하여 사용자 컴퓨터에 설치되어 있지 않은 글꼴을 서버에서 내려받아 사용할 수 있게 해주는 방법입니다.

- IE8 이하 버전은 @font-face를 사용할 때 .eot 파일만 인식합니다. .eot는 글꼴 파일의 종류 중 하나입니다.

- .eot만 업로드하면 IE6~11 브라우저에서만 해당 글꼴이 보이며, 다른 브라우저에서는 기본 글꼴로 보입니다. 하지만 현재 우리나라에서는 IE와 CHROME이용 비율이 많기때문에 .eot 파일만 업로드해도 충분합니다.

구글 웹폰트를 이용해서 변경하기

1.

구글 웹폰트 https://fonts.google.com/earlyaccess 사이트에서 'Link' 아래에 있는 주소를 복사합니다.

2.

'CSS 편집' 으로 이동하여 복사한 주소를 @charset "utf-"; 아래에 붙여줍니다.

3.

'CSS 편집' 에서 'Ctrl +F'를 눌러 검색창에 'font-family' 라고 입력합니다.

'font-family :' 의 뒷 부분에 기존 글꼴명이 적혀있는데, 'Nanum Gothic' 으로 변경해줍니다.

저는 구글 웹폰트를 이용하여 블로그의 글꼴을 변경해보았습니다. 

글꼴을 변경하면서 모르는 소스들이 많이 있었는데, 그 소스를 해석하지 못해 마냥 복사하고 붙여넣기만을 반복해서 답답하고 아쉬웠습니다. 

다음 시간에는 font-family, @font-face 등에 대하여 좀 더 알아보려고 합니다.