티스토리 본문 웹폰트 바꾸기

CSS 편집을 통해 본문의 기본서체를 바꿀 수 있다.

웹폰트는 눈누 사이트를 활용한다.

 

https://noonnu.cc/

눈누

1. 눈누에서 필터링을 웹폰트로 하여 마음에 드는 웹폰트를 찾는다.

2. 마음에 드는 폰트를 찾았다면 우측의 웹폰트 CSS 코드를 복사한다.

3. 티스토리 스킨 편집 화면에서 CSS를 찾는다.

4. 복사한 코드를 CSS 편집화면에 붙여넣는다.

위치는 상관없으나 초보자는 기본으로 작성된 CSS를 건드리다가 전체 초기화해야 하는 불상사를 막기 위해 맨 아래에 /* */ 으로 주석을 달아 관리하는 것도 좋다.

5. HTML에서 본문 영역에 웹폰트 적용

다시 HTML로 넘어온다.

그리고 ctrl + F 를 눌러 검색창에 #article-view 를 검색하여 찾는다.

다음 font-family 부분을 찾아 아까 복사 붙여넣기한 태그명 중 '폰트명'을 찾아 붙여넣기 한다.

세미콜론으로 마무리를 해야 한다.

위 사진은 'SUITE-Regular' 라는 폰트를 넣은 모습이고, 뒤의 폰트는 티스토리에서 기본으로 설정된 폰트인데 어디에 사용되는지 확인해보기 위해 /**/로 묶어 주석처리 한 것으로 따라하지 않아도 된다.

6. 다른 폰트도 바꾸기

CSS를 아예 모르는 사람이더라도 눈치 채셨겠지만 font-family라는 것이 티스토리에서 폰트를 지정하는 CSS 속성이다.

ctrl + F 를 눌러 이번엔 font-family를 검색하면 10여 군데 폰트를 바꿀 수 있는 곳이 많다.

그런데 필자가 6개월 전에 쓰인 블로그에서 본문이나 사이드바 등의 클래스명이나 ID가 어떻게 되는지 검색해보았는데

클래스명이나 ID는 바뀌는 것 같다.

따라서 이 글이 쓰인 시점과 글을 읽는 시점에서 본문이 #article-view가 아닐 수도 있다.

위 사진과 같이 티스토리에서 친절하게 주석을 달아두었다.

본문 폰트를 바꾼다고 본문 안에 쓰인 모든 요소, 가령 위 사진과 같이 인용문 같은 내용은 바뀌지 않으니 마음에 드는 폰트로 바꿔도 된다.

다른 폰트로 적용하고 싶으면 눈누에서 복사한 폰트를 아까 붙여넣은 곳 밑에 계속 여러번 붙여 넣어도 상관없다.

 

그리고 티스토리에서 작성된 것은 "" 큰 따옴표로 폰트 이름이 감싸져 있고, 눈누에서는 '' 작은 따옴표로 감싸져 있는데 둘 중 어느 것으로 해도 상관없다.

 

• #article-view : 본문
• #article-view blockquote : 인용문
• #article-view pre code.hljs: 코드블럭