티스토리 북클럽 폰트 변경하기

 

 

 

이번 글에서는 티스토리 북클럽 스킨 글씨체 변경하는 방법에 대해 알아보도록 하겠습니다.

 

 

폰트 불러오기

 

스킨편집 > html 편집 > CSS 탭으로 가 줍니다. 22번 줄부터 아래와 같은 웹 폰트를 불러오는 코드가 있습니다. 

 

/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

 

티스토리 북클럽 스킨의 기본 글씨체는 Noto Sans, 상단 블로그 제목 글씨체는 나눔명조로 설정되어 있습니다. 위 코드에서 @import url 첫째줄은 나눔명조 글씨체를 불러오는 코드, 둘째줄은 Noto Sans 글씨체를 불러오는 코드입니다. 

 

글씨체를 변경하기 위해서는 우선 원하는 폰트를 찾아야 합니다. 무료 폰트 정리가 잘 되어있는 블로그 링크 하나 납깁니다.

https://wess.tistory.com/

@web's fonts

 

원하는 폰트를 찾았다면 해당 폰트를 불러옵니다. 저는 나눔스퀘어네오 폰트로 바꿔보도록 하겠습니다. 나눔스퀘어네오 폰트를 불러오는 코드는 다음과 같습니다. 해당 코드를 CSS에 추가해 줍니다.

 

@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css');

 

 

 

 

불러온 폰트로 변경하기

 

import 부분 바로 아래 26번 줄부터 시작하는 아래 코드가 있습니다.

 

/* Type Selector Reset */
body {
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
	font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
	font-size: 1em;
	line-height: 1.25;
	color: #555;
}

 

이 부분에서 중간에 있는 font-family 속성값을 변경하면 블로그 제목 부분을 제외한 전체 글씨체를 바꿀 수 있습니다. 나눔스퀘어네오 폰트로 바꿔주기 위해서 font-family: 'NanumSquareNeo';라고 변경해 줍니다.

 

 

적용 후 확인해 보면 폰트가 변경된 것을 확인할 수 있습니다.

 

 

 

이렇게 티스토리 스킨 폰트를 변경할 수 있지만 간혹 이전에 사용하던 폰트와 충돌하여 특히 이전에 작성했던 글 중간중간 폰트가 제대로 바뀌지 않는 현상이 발생합니다. 이를 방지하기 위해서 아래 코드를 CSS의 /* Entry Content */ 부분에 추가해주도록 하겠습니다.

 

CSS 1406번 줄 부터 시작하는 /* Entry Content */ 바로 아래 추가해 주세요.

 

.entry-content span {
	font-family: '사용하는 폰트 이름' !important;
}

 

 

 

블로그 제목 폰트 변경하기

 

이렇게 폰트를 변경하여도 북클럽 스킨 왼쪽 상단의 블로그 이름 글씨체는 변하지 않는데요, 이 부분도 변경하고 싶으시다면 다른 부분의 코드를 수정해줘야 합니다.

 

#header h1을 검색하시면 126번 줄부터 시작하는 아래 코드를 찾을 수 있습니다.

 

#header h1 {
	padding: 23px 0 ;
	font-family: 'Nanum Myeongjo';
	font-weight: 800;
	font-size: 1.75em;
	line-height: 32px;
	letter-spacing: -0.2px;
	color: #333;
}

 

블로그 제목 글자의 속성이 여기에 설정되어 있는데요, font-family: 'Nanum Myeongjo' 이렇게 블로그 이름 부분이 나눔명조체로 설정되어 있는 것을 보실 수 있습니다. 마찬가지로 나눔스퀘어네오 폰트로 변경해보도록 하겠습니다.  font-family: 'NanumSquareNeo';라고 변경해 줍니다.

 

 

적용 후 확인해보면 블로그 이름 폰트가 변경된 것을 확인할 수 있습니다. 

 

블로그 이름 글자의 다른 속성을 변경하고 싶으시다면 마찬가지로 #header h1 내부 코드를 변경해주시면 되는데요, 각각의 속성은 다음을 의미합니다.

 

• padding: 제목 이름 주변 여백
• font-weight: 폰트 굵기
• font-size: 폰트 크기
• line-height: 줄 간격
• letter-spacing: 자간
• color: 글자 색상

 

주의하셔야 할 점은 블로그 이름 글자 색상은 #header h1 내부 코드가 아니라 바로 밑에 136번 줄부터 시작하는 #header h1 a 내부의 color 값을 변경해주셔야 바뀝니다.