닥치고 마케팅

[티스토리] 티스토리 기본 글꼴 바꾸는 방법 본문

마케터의 일상/티스토리

[티스토리] 티스토리 기본 글꼴 바꾸는 방법

닥치고마케팅 2020. 2. 21. 09:00

안녕하세요~
닥치고 마케팅입니다 :)

현생이 바쁘다 보니 1일 1포스팅은 어려운 것 같습니다.
아무래도 직업이 직업이다보니...더 그런 것 같네요...!

는 무슨!!!!!!!!!

세상에 안 바쁜 사람이 어딨겠습니까...
제 의지의 문제겠지요.. 다시 마음을 다잡아 봅니다.

오늘은 티스토리 블로글를 최적화하기 위해
공부한 내용들을 소개해 드리려고 합니다.

오늘 공유해드릴 컨텐츠는 티스토리 기본 글꼴 바꾸기인데요.

사실 이 컨텐츠도 많은 블로거들이 소개를 해주셨던 것이고,
저는 그 수많은 티스토리 기본 글꼴 바꾸기 컨텐츠를 보고 학습하면서
개인적으로 기록해서, 까먹지 않으려고 남기는 것이니 참고해주세요.

전혀 새로운 내용은 아닐 겁니다!

자 바로 살펴보도록 하겠습니다.

 

티스토리 블로그 기본 글꼴 바꾸는 방법


1. 글꼴 찾기

- 가장먼저 어떤 글꼴을 기본으로 하실 건지 정하셔야겠죠?
- Google Fonts 접속하셔서 ctrl + f로 원하시는 폰트를 찾아보세요.
- 영문 사이트 이기 때문에 영문으로 찾으셔야 합니다.
- 예를들어, '나눔고딕'이라고 하면 nanum 이런 식으로 말이죠!
- 저는 '나눔고딕'이 가독성이 좋고, 문서 작업할 때 가장 많이 사용하는 폰트라서
- 이 폰트를 기본 폰트로 지정해보겠습니다.

- 나눔고딕(nanum gothic)을 찾으셨다면 클릭해주세요!
- 그럼 아래 페이지로 이동을 하는데요, 우측 상단에 [SELECT THIS FONT] 메뉴를 선택합니다.

- 짠! 선택하면 아래와 같이 [Family Selected]라는 창이 뜨는데요
- 기본으로 EMBED -> Embed Font -> STANDARD로 설정되어 있고
- <link href= ~> 영역 코드를 복사해주시면 됩니다.

 

2. 글꼴 코드 붙여넣기

- html 편집기 위치 다들 알고 계시죠?
- 블로그 관리 -> 꾸미기 -> 스킨 편집 -> html 편집 -> HTML 메뉴로 이동해주세요! 
- 이동 후 아래 예시처럼 <link rel=stylesheet" href="./images/gont.css"> 코드 부분
- 아래에 붙여 넣어 주시고 [적용] 버튼을 꼭 눌러주세요!  

 

3. 글꼴 적용하기

- 2번까지 완료하셨다면 1번 진행하면서 보셨던 아래 페이지로 돌아가서
- Specify in CSS 영역에 나와있는 font-family ~ serif; 코드를 복사해줍니다.

- 그런 다음 아래 CSS 영역 중 body 태그 부분에 앞서 복사한 코드를 넣어주시면 됩니다.
- 단, 위 코드는 적용해보니 스킨이 깨지는 등의 현상이 나타나서 아래 코드를 복사해서 붙여 넣어주세요
- important는 단어 뜻처럼 '중요'하다는 의미로 '최우선 적용' 기능을 뜻한다고 하는데요
- 컨텐츠 본문에만 적용되면 되니까 body로 지정해주고, body 영역에서는 최우선으로 적용하는 폰트다~
- 이렇게 이해하면 될 것 같습니다.

body {font-family: 'Nanum Gothic', sans-serif!important;}


- 모든 작업이 완료되셨다면 [적용] 버튼을 눌러주세요~

- '오잉? 다 적용했는데 글 쓸 때는 적용이 안되네...?'
- 혹시 해서 찾아보니 글 쓸 때가 아니라 저장할 때 자동 변경된다고 하더군요!
- 그래서 비교해봤습니다. 기본 서체와 나눔고딕 서체를 비교해보세요.
- 기본서체보다 나눔고딕이 자간이 더 좁고, 모양이 다른 것이 느껴지시나요?

- 에디터에서 쓸 때는 몰랐지만, 저장을 해보면 확실히 알 수 있습니다.
- 여러분도 지금 바로 적용해보세요~
- 매번 컨텐츠 작성할 때마다 폰트 바꾸고 그랬어야 했는데 참 편해요!


위 내용을 다 적용시키셨다면 제목/내용 부분의 모든 글꼴이 변경되셨을 거예요!
저도 처음 시도하는 거지만 이렇게 배워나가는 재미도 있네요 확실히~

티스토리 블로그를 계속할 수밖에 없는 이유인 것 같아요!
이렇게 배우고 적용하는 게 왜 이리 재밌는지 참...

많은 도움되셨으면 좋겠습니다!

긴 글 읽어주셔서 감사합니다 :D

Comments