티스토리 스킨 폰트 변경하기(구글 웹폰트)

이번 포스팅은 티스토리 스킨에 구글 웹폰트(나눔 고딕)를 변경하는 방법을 포스팅하겠습니다.

특정 Square스킨이긴 하지만 모든 스킨이 비슷하지 않을까 합니다.
제가 사용하는 티스토리 스킨이 Square스킨인데 이 스킨만 그러는 건지 모르지만 기본 폰트가 컴퓨터 인터넷에서 글 가독성이 많이 떨어집니다. 뭔가 글자가 찌글 해져 보인다고 해야 하나 그렇습니다. 기본 폰트가 "Nato Sans Korean"인 것 같은데 가독성 정말 별로입니다. 글을 읽고 있으면 눈이 너무 피곤합니다. 왜 이 폰트를 기본으로 했는지 의문이 들 정도입니다.

그래서 폰트를 변경해 보았습니다. 저 역시 구글에서 이리저리 검색해서 얻어낸 결과입니다.

무료 폰트를 직접 업로드하려다가 스킨의 크기가 커져 로딩에 영향을 줄 수 있다고 해서 추천들 하시는 구글 무료 웹폰트를 사용했습니다. 구글 무료 웹폰트를 연결해서 폰트를 변경하는 방법이지만, 이것도 스킨 페이지 로딩에 얼마나 영향을 주는지는 정확히 모르겠습니다.
폰트는 여러분들이 사용하고 가독성 괜찮다고 추천을 많이 하시는 나눔 고딕으로 하였습니다.
나눔 고딕이 적용된 페이지들을 여러 개 보았는데 상당히 괜찮았습니다.

다른 폰트를 원하신다면 구글 웹폰트 페이지에서 원하시는 폰트로 사용하시면 될 듯합니다.

1. 구글 웹폰트 사이트를 연결하여 주세요.

https://fonts.google.com

Google Fonts

구글 사이트라 링크 연결해 두겠습니다.
여러 개의 무료 웹폰트가 나열됩니다. 이 중에서 "Nanum Gothic"을 찾아줍니다. 그리고 우측 상단에 3 styles글자를 눌러주세요.

페이지가 열리면서 3가지의 폰트 유형이 나타납니다. 폰트의 굵기가 3가지로 분류되어 있습니다.
여기서 전 "Regular 400"을 선택했습니다. 폰트 우측 끝에 "+selet this style"을 눌러주세요.

우측에 선택된 폰트의 주소가 나타납니다. "link"와 @import 두 개가 있고 기본은 link에 표시되어 있는데 @import를 선택하시고 아래 생성된 주소를 복사합니다.

주소에서 "style" 은 복사하지 마시고 @import부터 Nanum+Gothic&display=swap'); 까지의 부분만 복사해 주세요.

저 주소를 다 이곳에 입력했더니 링크 페이지로 분류되어 잘라서 넣었습니다.

3. 티스토리 스킨 편집으로 이동합니다. html 편집으로 이동하여 CSS탭을 클릭하여 CSS창으로 이동하여 주세요.
제일 상단에 @charset "utf-8"; 문구가 보이실 겁니다. 숫자는 다 동일한지 모르겠습니다. 그 아래로 보시면 기존에 사용되고 있는 폰트 주소가 있을 겁니다.

기본인 "Nato Sans Korean" 폰트도 보입니다. 그 아래에 복사한 주소를 붙여 넣기 해주세요. 위 이미지에서 검은색 네모칸 표시 구간입니다. 기존 폰트 주소 지우지 않으셔도 되고 원래대로 복구할 때 사용하도록 그냥 두시면 됩니다.

4. 몇 칸 아래나 찾기를 하셔서 font-family를 찾아주세요. 위 이미지에서 붉은색 네모칸 표시 구간입니다.
기본 폰트였던 "Nato Sans Korean"을 지워주시고 그 자리에 "Nanum Gothic"이라고 입력해 주세요.
아니면 이미지처럼 앞에 "Nanum Gothic"을 입력해 주셔도 기본은 나눔 고딕이 됩니다.
이제 저장을 눌러주시면 됩니다.

블로그에 들어가 보시면 폰트가 변경되어 있을 겁니다. 폰트를 변경하니 글 읽는 가독성 무척 좋아졌습니다.
나눔 고딕 폰트 외에 마음에 드시는 구글 폰트가 있다면 보시고 그대로 작업하시면 될 듯합니다.

감사합니다.