티스토리 블로그 폰트 변경하기 - 세부설정

지난 포스팅에서 티스토리 블로그 전체 폰트 설정하는 방법에 대해서 알아보았다. (정말 간단했음, 아래 링크 참고)

2021/02/06 - [혼자서도 잘 해요/Tistory] - 티스토리 블로그 폰트 변경하기 - 전체적용

티스토리 블로그 폰트 변경하기 - 전체적용

글씨 크기가 다르긴 했지만 나는 타이틀 부분 폰트는 조금 더 굵게 보였으면 하는 바람이 있어 세부 설정을 해 보았다. 역시 차근차근 따라하면 어렵지는 않지만, 그래도 해당 소스를 찾아야 하기 때문에 CSS가 익숙하지 않다면 조금 헷갈릴 수 있다.

---

내가 전체 적용한 폰트는 G마켓 산스 Light 버전이었기 때문에 타이틀 부분에는 조금 더 굵은 G마켓 산스 Medium 굵기를 적용하기로 했다. 눈누 사이트에서 해당 웹폰트 코드를 어드민의 /* Web Font Load */ 부분에 복사하는 과정까지는 지난 포스팅과 동일하게 진행하면 된다. 

 

좌측 상단 로고 & 리스트 타이틀 폰트 변경

스킨 편집의 CSS 창에서 #header h1 과 .list-type-thumbnail .post-item .title 부분을 각각 찾아서 font-family: 'GmarketSansMedium'; 을 추가해 주었다. 여기서 font-family의 작은 따옴표 안에 들어가는 서체는 눈누에서 각자 고른 웹폰트 코드의 font-family 서체명과 동일하게 맞춰주어야 한다. 

 

 

우측 상단 적용 버튼을 클릭한 후 티스토리 블로그를 새로고침하면 아래와 같이 로고 텍스트와 리스트 타이틀이 방금 넣은 폰트로 바뀐 것을 확인할 수 있을 것이다.

 

 

아래는 모두 이와 같은 방법으로 해당 CSS 위치에 원하는 폰트를 삽입해 주면 된다.

 

 

 

 

우측 사이드바 1차 카테고리 폰트 변경

우측 사이드바의 '분류 전체보기'와 '1차 카테고리'의 굵기를 두껍게 하여 '2차 카테고리'와의 구분을 명확하게 하고 싶었다. CSS에 해당 클래스가 없어서 이 부분은 코드를 새로 추가해 주었다. 나중에 찾기 쉽도록 .sidebar를  검색한 후 해당 클래스명이 모여있는 부분에 아래와 같은 코드를 작성했다.

 

.sidebar .category .link_tit {font-family: '폰트명';}
.sidebar .category .link_item {font-family: '폰트명';}

 

아래와 같이 카테고리 폰트가 변경 적용되었다.

 

 

우측 사이드바 탭 & 전체 방문자 타이틀 폰트 변경

카테고리 하단에 이어지는 최근글과 인기글, 전체 방문자 타이틀도 아래와 같이 font-family 코드를 삽입하여 추가해 주었다.

 

최근글 & 인기글 탭 부분 폰트를 두껍게

 

전체 방문자 타이틀 폰트를 두껍게

 

내부 포스트 상단 > 타이틀 폰트 변경

내부 타이틀도 예외가 될 수 없다. 동일한 방법으로 .post-cover h1 부분을 찾아서 코드를 삽입해주면 된다.

 

 

내부 포스트 하단 >  태그, 관련글, 댓글 타이틀 폰트 변경

각각의 클래스명에 해당되는 부분을 찾아서 {} 사이에 font-family: '폰트명'; 을 추가하면 아래와 같이 타이틀 부분만 다른 서체가 적용된다.

- 태그 타이틀은 .tags h2

- 관련글 타이틀은 .related-articles h2

- 댓글 타이틀은 .comments h2

 

 

이걸로 티스토리 폰트 설정이 마무리된 것 같다. 폰트만 변경했을 뿐인데 왠지 새롭게 블로그를 시작하는 기분이 든다. 앞으로 블로그를 운영하다가 블테기가 찾아오면 또 예쁜 폰트를 찾아서 바꿔주어야 겠다.

이 포스팅이 티스토리 블로그를 운영하는 분들께 도움이 되었기를 바라며... 이만 자러 가야겠다. 모두 굿밤 보내세요 :D