정보

티스토리 블로그 폰트 변경 방법

밍또스타 2022. 4. 21.
728x90
반응형

안녕하세요 밍또스타입니다.

 

블로그를 운영하다 보면 다른 블로그와 차별화를 위해, 가독성을 향상하기 위해 또는 개인의 심미적인 취향 만족을 위해 폰트를 변경하고 싶으실 듯합니다.

 

하지만 티스토리 블로그는 네이버 블로그와 달리 사용할 수 있는 폰트가 제한적이지요.

 

오늘은 티스토리 블로그를 운영하시는 분들이 한 번쯤 고민하시는 부분인

폰트를 변경하는 방법에 대해 알아보겠습니다.

 

혹시 모를 상황을 대비해 현재 사용 중인 스킨을 보관합니다.

  저도 전문가가 아니기에.. 제 방법이 틀릴 수 있겠지요.  

  혹시라도 발생할 사고를 방지하기 위해 지금 사용중인 스킨을 보관 처리합시다. 

 

  스킨 변경 → 사용 중인 스킨 (보관)

  보관된 스킨은 스킨 보관함에서 언제든지 다시 불러올 수 있습니다.

 

관리자 모드에서 왼쪽 하단의 스킨 편집을 클릭합니다.

 

'스킨 편집' 버튼을 누르면 새 창으로 스킨 편집이 가능합니다. 

여기서 스킨 편집에서 html 편집을 클릭합니다.

 

저는 Whatever 스킨 사용 중인데 다른 스킨을 사용할 경우 폰트를 변경하는 법을 글 뒤쪽에서 알려드리겠습니다. :) 

 

'html 편집' 버튼을 누르면 뜻을 알 수 없는 영어들이 등장합니다.

당황하지 말고 CSS 버튼을 눌러줍니다. (HTML이 아닌 CSS 창에서 편집해야 됩니다.)

 

 

 

 

변경하고자 하는 폰트의 웹폰트를 준비해주세요.

무료로 사용 가능한 폰트는 아래의 글을 참고하셔서 준비해주세요.

 

무료 폰트 다운로드/ 무료 한글 폰트 사이트 공유

안녕하세요. 밍또스타입니다. 요즘에는 대부분의 일들이 전자화가 되다보니 자연스럽게 프레젠테이션 자료를 작성할 일이 많아지는 것 같아요. 저는 주로 대학교 생활을 시작하면서 프레젠테

mingandrang.tistory.com

 

이제부터 중요해요! (집중)

준비하신 폰트의 웹폰트를 아래 위치(초록색으로 표시)에 '복사-붙여 넣기' 합니다.

 

그 후 복사한 웹 폰트의 2번째 줄에 있는 font-family 옆의 폰트명을 복사해 줍니다.

(위의 그림상에서는 27번째 줄에 있는 'Ddobakddobak'  / ※ 작은따옴표까지 함께 복사하셔야 합니다※)

 

CSS 창에서 'Ctrl+F' 키를 누른 후 "font-family"를 검색한 후 바로 옆에 복사한 폰트명을 붙여 넣기 해주시고 쉼표(,)를 넣어주세요.

CSS 창에 있는 모든 font-family를 검색하셔서 폰트명을 붙여넣기 하신 다음 '적용'을 눌러줍니다.

(시작 전에 스킨 보관함에 스킨을 저장했기 때문에 저장 후 문제가 생기더라도 복구 가능합니다)

 

 

이렇게 적용하고 새로고침 하면 티스토리 블로그 폰트 변경이 완료된 것을 확인할 수 있습니다.

 

 

다른 스킨을 사용하는 경우라면

Whatever 스킨으로 예시를 보여드린 것은 초보자도 Web-font 코드를 붙여 넣기 쉬운 양식을 띄고 있어서인데요.

여러 실험 결과 Whatever 스킨이 아닐 경우에도 똑같이 CSS 코드 창에 "@font-face ~~"를 붙여넣으시고 CSS 코드창에 있는 font-family에 폰트명을 붙여 넣기 하면 적용 가능합니다.

 

 

저는 전공자가 아니기 때문에 여러 실험을 거쳐서 터득한 방법을 알려드립니다만 틀린 부분이 있다면 지적 부탁드립니다.

 

 

함께 읽으면 좋은 글

2021.12.12 - [정보] - 무료 폰트 다운로드/ 무료 한글 폰트 사이트 공유

 

무료 폰트 다운로드/ 무료 한글 폰트 사이트 공유

안녕하세요. 밍또스타입니다. 요즘에는 대부분의 일들이 전자화가 되다보니 자연스럽게 프레젠테이션 자료를 작성할 일이 많아지는 것 같아요. 저는 주로 대학교 생활을 시작하면서 프레젠테

mingandrang.tistory.com

2021.12.12 - [정보] - 폰트 파일(TTF 파일) 설치 방법

 

폰트 파일(TTF 파일) 설치 방법

안녕하세요. 밍또스타입니다. 지난 포스팅에서 무료로 한글 폰트를 다운로드 받을 수 있는 사이트를 공유해드렸는데요, 이번 포스팅에서는 다운로드 받은 폰트 파일 (TTF 파일)을 설치하는 방법

mingandrang.tistory.com

 

728x90
반응형

댓글