Tistory 블로그 폰트 변경하기

 

📢 Tistory 블로그 폰트 변경 방법을 알아봐요

 

※ 24년 작성한 글 이에요

 

 

폰트는 왜 중요할까?

폰트는 아주 중요해요

스티브잡스가 학창시절 가장 재미있게 들었던 수업이 캘리그라피였다고 하죠

스티브잡스는 글씨는 단순 정보 전달의 목적 뿐만아니라 '사고'가 담겨있다고 생각했어요

 

 

티스토리 폰트 변경은 이것만 따라해요

Tistory 블로그 폰트 바꾸는 방법은 크게 2가지에요

첫째는 구글 폰트 사이트를 연동하여 바꾸는 방법이고 두번째는 직접 폰트를 업로드해서 css코드를 수정하는 것이죠

 

1) ttf보다 용량이 작은 woff 파일 구하기

ttf파일이 아닌 Web font 전용인 woff2나 woff 파일을 구해야해요

ttf가 woff에 비해 월등히 사이즈가 커서 웹사이트 성능에 영향을 미치기 때문이죠

• 눈누 사이트에서 cdn을 제공해줘서 손쉽게 css에 추가 가능
• 사용하고 싶은 글꼴 검색 후 웹폰트로 사용 부분을 복사하면 됨
  

  

2) Tistory 블로그의 CSS에 폰트 적용

블로그 관리자 > 꾸미기탭 > 스킨편집 > html편집 > 파일업로드 > +추가 경로에 위에서 복사한 @font-face~를 붙여 넣기

• /* Web Font Load */ 주석 부분에 추가해주면 됨
• 배민 글씨체와 D2Coding 추가해서 사용

 

3) 내 입맛대로 selector 별 style의 font-family 변경

• 아래 코드처럼 특정 tag나 class의 font-family 스타일을 내 입맛대로 변경

/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {
	font-family: 'BMHANNAPro';
	src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_seven@1.0/BMHANNAPro.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

...

nav li, .sidebar-2 .count, h1, h2, h3, h4 {
	font-family: 'BMHANNAPro';
}