[Tistory] 티스토리 블로그 폰트 변경하기

최근 티스토리 블로그 스킨을 마구잡이로 변경하다가

마음에드는 스킨을 찾았다.

그런데 딱하나

마음에 안드는게 있었는데 

블로그 제목 글씨체가 너무 안어울렸다.😗

 

티스토리에서는 글씨체를 변경할수있는 옵션이 없어서,

CSS를 직접 만져줘야했다.

오늘은 아주 쉽게 글씨체를 변경하는 법을 알아보았다!

 

---

알아보기에 앞서, 글씨체는

제목부분(아래그림 빨간네모)

내용부분(아래그림 파란네모)

로 나누어서 변경할 수 있다.

나는 제목부분이 마음에 안들었기 때문에 이부분을 먼저 건들어봤다. 

스킨편집 화면

 

---

제목부분 글씨체 변경

---

1. 폰트 찾기

폰트는 아래 사이트에서 찾을 수 있다. 

 

구글 폰트

Google Fonts

눈누

눈누

 

한글 폰트만 보려면 Languages -> Korean 으로 설정해주면 된다. 원하는 폰트를  선택해준다.

우아한 형제들.. 킹쁘긴해

Select this style 클릭

그럼 아래와 같은 창이 나온다. 여기서 @Import 클릭

아직 창을 닫으면 안된다! <style> 태그 부분을 복사해서 써야 하기 때문. 

 

2. 스킨 편집

티스토리 설정으로 들어가서, 스킨편집 화면으로 이동한다.

 

 

편집 화면에서 html편집 -> CSS 클릭 한 후, 아까 @Import 부분을 복사한다.

<style> 과 </style> 사이부분을 복사하면된다.

 

 

복사한 후, CSS 편집 화면에서 @import 가 있는 부분에 붙여넣기한다. 아래 CSS rules ~ 어쩌고 부분도 사용할 것이니 창을 그대로 놔둔다.

붙여넣은 모습

3. 제목 변경

이제 제목 부분을 찾아야 한다. CSS의 아무부분을 누른 후, Control + F 를 누른다. 여기에 "header h1" 을 검색한다.

 

 

정상적으로 찾았다면, 제목부분인 주황색 네모칸 부분이 나온다.

이제 이부분에서 "font-family" 부분을 수정할 것이다.

일전 Google Fonts 로 돌아가, 아래 그림의 CSS rules ~ 부분을 복사한다.

그리고 "font-family" 줄 부분을 복사한것으로 교체한다. 해당 줄을 드래그하고 붙여넣기하면 깔끔하게 적용할 수 있다.

이제 모두끝났다. 편집창 우측 상단의 "적용" 을 누르고, 왼쪽 미리보기에 "새로고침" 을 누르면 변경사항을 확인 할 수있다.

그런데 나는 새로고침해도 변경이 안돼서 직접 홈으로 돌아가보니 변경되어있었다.~.~

 

이뻐

 

---

내용 부분 변경

---

내용 부분은 "font-family" 를 갈아 끼우는 부분만 다르고 모두 동일하다. 따라서 해당 부분인 3. 번 부터 설명한다.

3. 내용 부분 변경

폰트 사이트에서 "CSS rules .." 부분을 복사해서, @import 바로밑의 "body {.." 를 찾는다.

그리고 동일하게 "font-family" 를 변경하는데, 주의⛔️ 할 점은 아래그림에서 빨간 네모칸 부분만 바꿔줘야 한다!

font-family: 뒤 쪽 부분만 복사해서 'AppleSDGothicNeo', 뒷 부분을 바꿔주면 끝!

 

 

우측 상단에 "적용" 후 "새로 고침" 해서, 확인하거나 다시 블로그로 돌아가보면 변경된것을 볼수있다.

---

이번 포스팅에서는 글씨체 변경에 대해 알아보았다.

티스토리는 CSS로 폰트변경을 해야해서 대충 사용하자 생각이었는데,

이번 스킨은 스킨에 비해 글씨체가 너무 마음에 안들어서 

그냥 바꿔버렸다! 바꾸니까 이쁘고 좋은것 같다😙

궁금하신 사항이나 피드백은 댓글로 남겨주세용~~

 

레퍼런스

[티스토리 팁] 폰트 변경하기 / 글씨체 바꾸기

 

[티스토리 팁] 티스토리 글씨체(폰트) 변경하기 - 눈누