현재 잇 플래닛은 Nato Sans KR 글꼴을 적용하여 사용하고 있습니다. 오늘은 자신이 원하는 폰트(글씨체)로 티스토리를 구성하는 방법을 소개하고자 합니다. 마음에 드는 폰트를 이미 결정하셨다면 CSS 편집을 활용하여 1분 만에 티스토리 전체에 적용 가능합니다!
티스토리 전체 폰트(글씨체) 바꾸는 간단한 방법
1. 웹폰트 주소 복사하기
구글 폰트 사이트의 경우
구글 폰트 사이트 (클릭하면 사이트로 이동)에서는 저작권 문제없는 무료 폰트를 볼 수 있습니다.
눈누 사이트의 경우
눈누 사이트 (클릭하면 사이트로 이동)에는 구글보다 더 많은 무료 폰트들이 있습니다. 다만 폰트 두께까지 세심하게 선택할 수는 없고, CSS 코드만 제공하여 HTML에 웹폰트 주소를 바로 붙여 넣을 수는 없습니다.
ㆍ라이선스를 확인한 후 복사합니다.
2. 스킨 편집 화면에 붙여 넣기
@import를 복사한 경우(CSS 편집)
ㆍ@import를 찾아서 웹폰트 주소를, font-family를 모두 찾아 웹폰트 이름 및 속성을 붙여넣습니다.
ㆍ[적용]을 클릭합니다.
body 뿐만 아니라 button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul 등 원하는 클래스 안에 font-family: 'Nanum Gothic', sans-serif를 넣어서 수정할 수 있습니다. 이때 주의할 것은 다른 폰트 이름 보다도 맨 앞에 넣어야 합니다. 또한 위 화면의 경우 모두 같은 sans-serif(획 삐침이 없는 서체) 이므로 생략하고 마지막에만 넣어줍니다.(산세리프가 아닌 다른 속성의 글씨체를 입력하시는 경우도 있을 것 같아서 우선 화면에는 삭제하지 않고 보여드렸습니다.)
body 클래스 안의 font-family를 삭제하고, 위 화면처럼 작성하면 티스토리 전체의 폰트를 한 번에 원하는 폰트로 지정해 줄 수도 있습니다.
<link>를 클릭하여 복사한 경우(HTML 편집)
만약 구글 폰트 사이트에서 <link>를 클릭하여 html 코드를 복사한 경우 아래 화면과 같이 <head> </head> 사이에 복사한 웹폰트 주소를 붙여 넣습니다. (단, 이때에도 웹폰트 이름 및 속성은 CSS에 넣어야 합니다.)
제가 현재 티스토리에서 사용하고 있는 폰트는 Noto sans KR입니다. 무료 폰트 이면서 다양한 두께가 있고, 저는 돋움체, 고딕체 계열이 가독성이 좋은 느낌이 들어서입니다. 뿐만 아니라 사실 티스토리 블로거 많은 분들이 티스토리에 적용하고 있는 폰트이기도 합니다.(사실 대세를 따른 느낌이네요.)
오늘은 티스토리의 폰트(글씨체)를 원하는 폰트로 바꾸는 방법을 함께 살펴보았습니다. 폰트를 지정해주면 가독성, 디자인 등에서 장점도 있지만 분명 단점도 있습니다. 다음 시간에는 폰트 관련 속성(산세리프 등)에 대한 이야기와, 폰트를 지정할 때 발생하는 티스토리 최적화 문제에 대해서 함께 이야기해보겠습니다. 감사합니다!
'티스토리' 카테고리의 다른 글
| 티스토리에 폰트 직접 업로드해서 적용하기 (0) | 2021.09.19 |
|---|---|
| 티스토리 웹폰트가 무거워요! 최적화 방법은? (0) | 2021.09.11 |
| 티스토리 북클럽스킨 : 본문 상단이미지 바꾸기(완전정복편) (2) | 2021.09.08 |
| 티스토리 글에 CCL 표시는 꼭 해야 하나 (0) | 2021.09.06 |
| 티스토리 초기 셋팅 톺아보기 (포스트 주소의 문자, 숫자 장단점까지) (0) | 2021.09.06 |
댓글