티스토리 블로그 기본 폰트를 웹폰트로 바꾸기

네이버 블로그도 잠깐 사용해보긴 했지만 블로그에 글을 꾸준히 쓴다는 것도 쉬운 일은 아니다.

나름 의욕적으로 시작한 것이 티스토리 블로그인데 자신의 관심사나 어떤 아이템을 선정하고 지속적으로 글을 쓴다는 것은 역시 열정과 끈기가 필요한 것 같다.

처음엔 디폴트로 설정된 세팅대로 사용을 했었는데 시간이 지나면서 나름대로 세부적인 사항을 하나씩 고쳐보고 싶은 욕심도 나고 그 중에서 가장 먼저 했던 것이 바로 기본 폰트를 바꾸는 것이었다.

자신의 티스토리 블로그에 로그인해서 관리자 모드로 들어가면 글쓰기 메뉴가 있고, 들어가보면 위와 같이 내용을 작성하는 웹에디터가 있다. 여기서 폰트 선택하는 셀렉트박스를 클릭해보면 가장 기본적인 한글 폰트들인 굴림, 바탕, 돋움, 궁서, 그리고 영문 폰트들이 보인다.

이런 기본 폰트를 사용해도 가독성은 나쁘지 않지만 블로그를 나름대로의 취향에 맞게 가꾸려고 할 때 스킨과 함께 중요한 역할을 하는 것이 폰트이다보니 바꾸고 싶은 욕구가 솟아 오른다.

가장 먼저 할일은 폰트 파일을 지정하는 것인데, 사용할 폰트 파일을 업로드해서 사용하거나 구글에서 제공하는 웹폰트 링크를 거는 방법 등이 있다. 차이는 있지만 특정 서버에 있는 폰트파일을 지정해서 사용한다는 점에서 같은 맥락으로 봐도 무방하겠다.

내가 사용한 방법은 구글 웹폰트를 이용하는 방법이다. 일단 티스토리 블로그는 그냥 두고 새로운 탭 하나를 띄운다.

구글 웹폰트 사이트 바로가기 : https://www.google.com/fonts

위의 주소로 접속하면 Google Fonts 사이트로 접속할 수 있다. 위의 화면과 같이 현재 기준으로 692개의 폰트가 있다고 나오고 있다. 하지만 검색을 해봐도 한글 폰트는 확인이 안된다. 여기서 오른쪽 위의 빨간색으로 표시한 메뉴 More scripts를 클릭하면 한글 폰트를 확인할 수 있는 Early Access! 페이지로 이동한다.

위와 같이 추가 폰트 목록이 쭈욱 나열되어 있는 것을 확인할 수 있다. 하지만 별도의 검색 기능이 없는 상태라 Ctrl+F 키로 페이지 검색을 해야 한다. 

Ctrl+F를 눌러서 검색창이 나타나면 korean 이라고 입력하고 엔터키를 누른다.

위와 같이 한글 폰트들을 볼 수 있다. 30개 정도의 한글 폰트가 있는 것으로 나오는데 나 같은 경우 네이버에서 제공하는 무료 폰트인 나눔고딕을 사용하므로 다시 검색을 해보기로 한다.

검색창에 nanum gothic 이라고 입력하고 엔터키를 누른다.

화면에 나눔고딕체의 등록정보와 링크정보, 예시 등의 정보를 확인할 수 있다. 여기서 필요한 정보는 Link 부분과 Example 부분의 내용이다. 우선 Link 부분의 내용을 복사(Ctrl+C)한다.

아까 열어둔 블로그 관리자에서 HTML/CSS 편집 메뉴를 클릭한 후 위와 같이 style.css  내용의 맨 윗 부분에 복사한 문구를 붙여넣기(Ctrl+V)한다. 빨간색 테두리로 표시한 부분이 새로 추가된 부분이다.

스크롤바를 내리다 보면 font-family 항목이 나타나는데 여기에 nanum gothic 문구를 위의 빨간색 테두리안의 내용과 같이 추가한다. 여기서 font-family: 다음에 있는 폰트명이 가장 먼저 적용되는 폰트가 된다.

저장 버튼을 누르면 style.css 파일에 새로 추가한 내용이 반영된다.

즉, 위와 같이 작업한 내용을 설명하자면, 구글폰트 사이트에 등록된 나눔고딕 폰트의 URL을 지정 후 font-family 항목에 사용할 첫 번째 폰트를 nanum gothic로 지정한 것이다. 이렇게 함으로써 내 블로그에 사용되는 기본 폰트가 나눔고딕으로 지정이 된다.

나눔고딕 폰트 지정 전 상태의 화면

나눔고딕 폰트가 지정된 후의 화면

한가지 알아야 할 사항은 style.css 파일에 나눔고딕이 추가되었다고 해서 에디터에서의 폰트 목록에 나눔고딕이 보이지는 않는다는 것이다. 하지만 웹에디터 자체에는 기본적으로 정의된 폰트 목록만 보이더라도 실제 적용 시에는 style.css에 적용된 나눔고딕 폰트가 최우선으로 반영되도록 되어 있는 것이다.