티스토리 폰트 변경 (북 클럽 스킨) ①

 블로그를 시작하면서 제일 먼저 하는 건 역시 블로그 꾸미기. 근데 이넘의 블로그들은 죄다 html, CSS 등 컴퓨터 언어를 알아야 뭐가 진행된다. 블로그 하려면 성실한 건 물론이고 코딩도 해야 하나 보다..... 나름 열심히 검색해서 얻은 정보들을 버리긴 아까워 정리해 본다.

 

 북 클럽 스킨의 기본 폰트는 나눔 명조다. 난 이런 폰트 싫어한다. 좀 사람 느낌 나는 글씨체가 좋달까? 그래서 열심히 검색해 폰트 변경을 진행했다. 잘 따라 하기만 하면 나름 쉬운 듯

1. 폰트 변경 준비

먼저 구글 폰트 사이트에 접속한다. (https://fonts.google.com/). 좌측 상단쯔음 Language에서 Korean을 선택한 후 마음에 드는 폰트를 클릭한다. 나는 Hi Melody랑 Gaegu 두 개가 마음에 들었지만 일단 Hi Melody만 진행했다.

구글 폰트 사이트

구글 폰트 사이트 (language - korean)

 

원하는 폰트를 클릭하고 보이는 화면에서 우측 하단을 보면 Select Regular XXX +가 보인다. XXX는 글자 굵기로, 본인이 마음에 드는 굵기를 선택해 +버튼을 눌러준다. Hi Melody는 굵기가 하나밖에 없다.

Hi Melody 폰트 선택

 

구글 폰트 사이트 화면 우측 상단에 네모네모네모플러스 아이콘을 눌러보자. 그럼 내가 저장한 폰트가 여기에 있는데 중간쯤 link와 @import 중에 @import를 선택. 그럼 아래에 이상한 url 링크와 font-family: ~ 가 보인다. 먼저 url 쪽 코드를 복사한다. @import~~ swap'); 까지. 2~4번째 줄만 복사한다.

Selected family

 

이제 블로그 관리창으로 넘어와 꾸미기 아래 스킨 편집 클릭

티스토리 설정

 

오른쪽에 보이는 html편집 클릭

스킨 편집 창

 

이상한 영어와 숫자가 돌아다니지만 무시하고 상단에 CSS 클릭 후 25번째 줄에 복사한 @import 코드를 붙여 넣는다. 우측 상단에 적용까지 눌러주면 준비 끝이다. 이제 블로그 내 폰트를 변경할 수 있다.

CSS 편집

 

font-family
@import url('https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400&family=Hi+Melody&display=swap'); /* 폰트 저장 */

 

1-1. 헤더 폰트 변경

구글 폰트 사이트 Selected family에 있던 font-family 코드를 복사해 오자.

font-family

 

CSS 화면에 빈 공간을 선택하고 Ctrl+f를 눌러 검색창을 띄운다. 여기에 header h1을 적으면 여러 개의 값이 보이는데 아래와 같은 코드를 찾아보자 (/* oooo */ 는 주석).

 

아무런 폰트 설정을 하지 않았다면 font-family: 'Nanum Myeongjo' ; 로 되어있다. 이 줄 전체를 복사한 CSS 코드로 바꾸고 우측 상단에 적용을 누른다. 그럼 내 블로그 이름의 폰트가 바뀐다. 

 

#header h1 { /*헤더(블로그 이름) 폰트 수정*/
	padding: 23px 0 ;
	font-family: 'Hi Melody', cursive; /*폰트 변경*/
	font-weight: 800;
	font-size: 1.75em; /*폰트 크기 변경*/
	line-height: 32px;
	letter-spacing: -0.5px;
	color: #333; /*폰트 색상 변경*/
}

 

1-2. 블로그 폰트 변경

CSS 화면에 빈공간을 선택하고 Ctrl+f를 눌러 검색창을 띄운다. 여기에 body를 적으면 여러 개의 값이 보이는데 아래와 같은 코드를 찾아보자 (/* oooo */ 는 주석).

 

헤더와 마찬가지로 아무런 폰트 설정을 하지 않았다면 font-family: 'Nanum Myeongjo' ; 로 되어있다. 이 줄 전체를 복사한 CSS 코드로 바꾸고 우측 상단에 적용을 누른다. 이제 내 블로그의 전체적인 폰트가 변경되었다.

 

body { /*블로그 전체 글자 수정*/
	-webkit-text-size-adjust: 100%;
	font-weight: 400;
	font-family: 'Hi Melody', cursive; /*폰트 변경*/
	font-size: 1em; /*폰트 크기 변경*/
	line-height: 1.25;
	color: #555; /*폰트 색상 변경*/
}

 

추가로 font-size, color를 본인 마음에 들도록 수정해도 상관없다.  만약 1-2를 진행해도 내가 쓴 글의 폰트가 바뀌지 않는다면, 1-3, 1-4를 진행해 보자.

 

1-3. 문단 모양: 제목 폰트&크기 변경

티스토리에서 글을 쓸 때, 문단 모양을 제목 1,2,3과 본문 1,2,3 중에 선택해야 한다. 여기서 문제는 body에 적용한 폰트가 내 글에 적용되지 않기에 또 설정을 해줘야 한다. 원래라면 내가 사용한 문단 모양에 맞춰서 h2 span, h3 span, h4 span 이런 식으로 적어줘야 하지만 잘 모르겠으면 그냥 아래 코드를 모두 복사해서 CSS창 맨 밑에 붙여넣고 'Hi Melody' 부분만 수정해주면 된다. 티스토리 스킨마다 치환자가 다르지만, 일단 북 클럽 스킨의 경우 아래 코드로 가능하다. 

 

.tt_article_useless_p_margin h4 span{font-family: 'Hi Melody'!important;} /*제목1*/
.tt_article_useless_p_margin h4 span{font-family: 'Hi Melody'!important;} /*제목2*/
.tt_article_useless_p_margin h4 span{font-family: 'Hi Melody'!important;} /*제목3*/

 

응용하면, 각 제목의 font-family를 다르게 설정하면 제목 1,2,3의 폰트를 모두 다르게 사용할 수 있다. 

 

.tt_article_useless_p_margin h2 span{font-family: 'Gaegu'!important;} /*제목1*/
.tt_article_useless_p_margin h3 span{font-family: 'Nanum Myeongjo'!important;} /*제목2*/
.tt_article_useless_p_margin h4 span{font-family: 'Hi Melody'!important;} /*제목3*/

 

제목 1,2,3의 가장 큰 차이는 폰트 크기이다.  그런데 제목 1, 2, 3의 크기가 모두 마음에 들지 않다면 크기를 조정할 수 있다. CSS화면에서 Entry Content를 검색하면 딱 두 개가 찾아진다. 1400번대 줄부터 보면 된다. 주석으로 달린 /* Entry Content */ 밑을 보면 h1~h4까지의 코드가 있다. h1은 헤더 부분이니 무시하고, h2~h4까지의 font-size를 원하는 크기로 수정해주면 된다. 

 

/* Entry Content */
.entry-content h1 { /*무시*/
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.6875em;
	line-height: 1.5;
	color: #000;
}

.entry-content h2 { /*제목1*/
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
} 

.entry-content h3 { /*제목2*/
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.3125em;
	line-height: 1.5;
	color: #000;
} 

.entry-content h4 { /*제목3*/
	clear: both;
	margin: 29px 0 22px;
	font-weight: 400;
	font-size: 1.3em;
	line-height: 1.5;
	color: #000;
}

 

1-4. 문단 모양: 본문 폰트&크기 변경

티스토리 스킨마다 치환자는 다르지만, 일단 북 클럽 스킨의 경우 아래 코드를 CSS화면 맨 밑에 적어주자. 'Hi Melody' 부분만 본인이 설정한 폰트로 수정하면 폰트 변경은 끝이다.

 

.tt_article_useless_p_margin p span{font-family: 'Hi Melody'!important}; /* 본문 폰트 변경*/

 

CSS화면에서 entry-content p 를 검색해 보면 아래와 같은 코드가 나온다. 여기서 font-size를 본인이 원하는 크기로 수정하면 된다.

 

.entry-content p { /*본문 폰트 설정*/
	margin-bottom: 20px;
  	word-break: keep-all;
	font-size: 1.1em;
	line-height: 1.9;
	color: #555;
}

 

1-5. 이미지 캡션 폰트 변경

아래 코드를 CSS화면 맨 밑에 적어주자. 캡션의 폰트는 font-family: 'Hi Melody' 부분을, 폰트 크기는 font-size를 본인이 원하는 대로 수정하면 된다. font-family: 'Hi Melody' 줄을 지우면 1-2에서 설정한 폰트가 기본으로 적용된다.

 

figcaption{ /*캡션 폰트 변경*/
	margin: auto;
	font-family: 'Hi Melody'!important;
	font-size: 16px !important;
}

 

끝!