본문 바로가기
다른이야기/블로그 정보

티스토리 북클럽(Book Club) 제목(타이틀) 폰트변경

by BIT LOGER 2021. 1. 1.

북클럽 타이틀(제목) 폰트(글자) 변경법

 

 

 

source : description.tistory.com

 

티스토리(tistory) 북클럽 타이틀(제목)의 글자 폰트변경 방법입니다. 위 그림은 변경 전 / 후의 그림입니다.

 

티스토리의 폰트는 구글폰트를 사용하고 있습니다.

 

 

fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

 

위 링크는 구글 폰트의 링크입니다.

 

 

 

블로그관리 -> 스킨편집 -> Html 편집 -> CSS

 

source : description.tistory.com

 

먼저 블로그 관리로 가서 스킨편집을 누르고 Html 편집으로 이동 CSS를 선택합니다.

 

source : description.tistory.com

 

CSS의 22번째 줄 /* Web Font Load */ 가 사용 폰트입니다. 

source : description.tistory.com

22번째 줄이 아닐 수 도 있으니 Ctrl + F 를 눌러 Web Font Load 를 검색해 줘도 됩니다.

 

 

fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

위 링크를 타고 구글 폰트로 이동합니다.

 

source : fonts.google.com

Custom에 한글을 쓰면 한글이 되는 폰트는 한글이 출력 됩니다. 원하는 글꼴을 찾아 봅니다.

 

source : fonts.google.com

언어를 Korean 으로 바꾸면 한글로 출력되는 다양한 글꼴들을 찾을 수 있습니다. 40px는 글자의 크기 입니다.

 

원하는 글꼴을 선택해 봅니다. Nanum Pen Script를 선택해 보겠습니다.

 

source : fonts.google.com

 

Select this style를 클릭 합니다. 40px는 폰트크기로 글자의 크기 조정도 가능합니다.

 

 

source : fonts.google.com

 

@import 를 선택 붉은 박스안의 소스를 복사해 줍니다. 각각 복사를 해서 적용을 해줘야 합니다.

 

 

 

CSS 폰트적용

 

source : description.tistory.com

구글 폰트의 @import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap'); 를 /* Web font Load */ 25번째 줄에 추가 했습니다.

 

source : description.tistory.com

기존 font-familyfont-family: 'Noto Sans KR', sans-serif; 를 -> 구글 폰트의 font-family: 'Nanum Pen Script', cursive; 로 변경해 줍니다.

 

source : description.tistory.com

 

CSS 상단의 적용을 누르면 변경된 걸 확인 할 수 있습니다.

 

글자크기나 굵기는 size나 weight의 숫자를 바꿔 적용해서 원하는 크기나 굵기로 변경하면 됩니다.

댓글