티스토리 북클럽 스킨 | 본문 폰트 크기 변경 및 나눔고딕 웹폰트로 변경하기

목차

본문 폰트를 '나눔고딕' 웹폰트로 일괄 변경하기

블로그에 글을 쓰다 보니 기본 폰트의 크기가 작고 굵은 편이라 가독성이 떨어진다는 생각을 항상 해왔는데

검색을  해보니 웹폰트인 나눔고딕으로 기본 글꼴을 바꾸는 방법을 많이 공유하셨더라고요.

 

저도 가독성을 높이기 위해 하나씩 따라 하며 변경을 해봤는데 깔끔해진 글꼴이 상당히 마음에 듭니다.

 

웹에서는 HTML을 변경하는 방법, CSS를 변경하는 방법 등 여러 가지 방법들이 있지만

저는 CSS에서 웹폰트를 본문에 일괄 적용하는 방식으로 알아보도록 하겠습니다.

 

 

구글 웹폰트 나눔고딕 CSS 적용하기.

CSS는 티스토리 '블로그관리 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS' 탭을 차례로 클릭하면 됩니다.

CSS에서 'Ctrl + F'로 '@import'를 검색 후 첨부파일의 코드로 아래처럼 바꿔주기만 하면 됩니다.

굳이 검색 하지 않아도 CSS의 23~24번째 줄에 있으니 쉽게 찾을 수 있습니다.

 

CSS 수정전

 

CSS 수정후

수정 내용

1. 기존의 웹폰트 링크 삭제 후 구글의 '나눔 고딕' 링크로 변경

2. 그꼴의 가독성을 위해 폰트의 굵기를 변경 (400 → 500)

3. 기존 폰트를 모두 지우고 '나눔 고딕'으로 변경

4. 글꼴의 가독성을 위해 회색에서 진한 회색으로 변경 (#5555 → #4444)

 

아래의 코드 중 마음에 드는 코드를 복사하여 사용하세요!

▼ CSS 코드1 복사하기 (기존 폰트 삭제 후 나눔고딕만 적용)

/* 웹폰트 수정 */
@import url('https://fonts.googleapis.com/css2? family= Nanum+Gothic:wght@400;700;800 & display=swap');

/* Type Selector Reset */
body {
	-webkit-text-size-adjust: 100%;
	font-weight: 500;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 1em;
	line-height: 1.25;
	color: #444;
}
/* 웹폰트 수정 끝 */

 

▼ CSS 코드2 복사하기 (삭제 없이 나눔고딕 폰트를 추가한 코드)

/* 웹폰트 수정 */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

/* Type Selector Reset */
body {
	-webkit-text-size-adjust: 100%;
	font-weight: 500;
	font-family: 'Nanum Gothic', 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
	font-size: 1em;
	line-height: 1.25;
	color: #444;
}
/* 웹폰트 수정 끝 */

 

CSS 코드를 변경 후 꼭 '적용'을 눌러 주셔야 합니다. 적용 후 '스킨편집'의 우측 새로고침을 눌러보면 변경된 내용을 확인할 수 있습니다. 또는 내 블로그로 가셔서 글들을 확인해 보면 전체적으로 적용된 걸 확인할 수 있습니다.

728x90

 

본문폰트 크기 및 색상 변경하기

CSS에서 'Ctrl + F'로 '.entry-content p'를 검색 후 첨부파일의 코드로 아래처럼 바꿔주시면 됩니다.

.entry-content p

CSS 수정전

 

CSS 수정후

수정 내용

1. 글꼴의 가독성을 위해 폰트의 크기를 변경 (0.9375em → 1em)

2. 글꼴의 가독성을 위해 회색에서 진한 회색으로 변경 (#5555 → #4444)

 

폰트의 크기 예제

- 폰트의 크기 1em

- 폰트의 크기 1.2em

- 폰트의 크기 1.5em

 

 

▼ CSS 코드 복사하기

/* 본문 폰트 */
.entry-content p {
	margin-bottom: 32px;
	word-break: break-word;
	font-size: 1em; /* 0.9375em */
	line-height: 2;
	color: #444; /* #555 */

CSS 코드를 변경 후 꼭 '적용'을 눌러 주셔야 합니다. 적용 후 '스킨편집'의 우측 새로고침을 눌러보면 커진 폰트를 확인할 수 있습니다.

728x90

 

구글 웹폰트 알아보기

나눔고딕 외 다른 폰트를 원하신다면 구글 폰트에서 찾아보시기 바랍니다.

구글을 로그인하셔야 소스를 확인할 수 있습니다.

 

구글 폰트 바로가기

Google Fonts

 

구굴 웹폰트 코드 가져오기

 

 

이쁜 블로그 만드세요!!

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"