티스토리 폰트 적용하기

1. 무료 폰트 검색

google font 중 원하는 폰트를 찾습니다.

https://fonts.google.com/

Browse Fonts - Google Fonts

원하는 폰트를 찾으면, Select 버튼 (1) 을 클릭하고 나온 화면에서 @import 를 클릭합니다. (2)

 

2. HTML 편집

티스토리 관리 페이지에 들어가서,

꾸미기 > 스킨 편집 > html 편집 > css 상단에 아래 복사한 @import 부분을 추가합니다.

 

 

3. 원하는 항목마다 폰트 설정

전체적인 기본 글씨체로 설정하려면, body, button, input, select, table, textarea { 하단에 font-family 를 제일 앞에 추가합니다.

font-family 이름은 @import 를 했을 때 하단에 있는 이름입니다. (1번의 (4) 번 빨간 박스)

그 외 각 항목별 이름은 다음과 같습니다.

 

티스토리의 최상단에 나오는 블로그 이름의 폰트는 .inner_header .title_text 에 적용해야 합니다.

.inner_header .title_text {
  font-family: '이름'; <--- Here!!
  display: block;
  margin-top: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

 

티스토리 게시글 제목 폰트는 .article_content .title_post 에 작성합니다.

.article_content .title_post {
  font-family:'이름'; <--- Here!!
  display: block;
}

티스토리 게시글 내부 폰트의 크기를 조정하려면 .article_content .article_view 를 수정합니다. (폰트는 body, button, ~ 을 수정했을 때 이미 적용이 되었습니다.)

.article_content .article_view {
  font-size: 17px; <--- Here!!
  line-height: 28px;
}

 

 

코딩 블럭의 폰트는 .hljs 가 기존에 없기 때문에 아래와 같이 전체를 새로 추가하여 적용합니다.

.hljs {
  font-family: '이름';
}

 

+ 그 외의 이름을 알아보고 싶다면 티스토리 블로그 화면에서 개발자 도구 (F12) 를 눌러서 원하는 항목의 class 이름을 확인하고 CSS 에서 찾으면 됩니다.

 

[ 참고 ]

1. 구글 폰트 적용법

https://mjmjmj98.tistory.com/17

2. 티스토리 폰트 수정 방법

https://zvi975.tistory.com/74

3. 티스토리 스킨 가이드

https://tistory.github.io/document-tistory-skin/