본문 바로가기
별밤 일지/기획

[티스토리 블로그 만들기] 폰트 변경하는 방법

by 별밤 에디터 2024. 2. 25.

안녕하세요! [티스토리 블로그 만들기]입니다.
 
지금까지
블로그 홈프로모션도 삭제하고
정사각형 프로필도 만들어보고
프로필 크기도 줄여봤지만
그럼에도 뭔가 항상 애매하게 마음에 들지 않았었는데요....
 
그 이유를 찾았습니다.

 

그 이유가 보이시나요?
아직 안 보이신다고요?????

 

이제는 보이지 않으시나요?

이 구닥다리... 그지 같은... 폰트.....
(개인의 취향마다 차이는 있겠지만 일단 제 취향은 아닙니다.)
그래서 오늘의 주제는....
 

⭐️블로그 제목 폰트 변경하기.⭐️

 
가 되겠사옵니다.


 

1. 폰트 찾기

우선 저 마음에 안 드는 폰트를 대체할 수 있는 예쁜 폰트를 찾아야 합니다.
폰트는 여러 사이트에서 찾을 수 있는데, 주로 아래의 두 가지 사이트를 많이 사용하시는 것 같아요.
 
▶︎ 구글 폰트

 

Browse Fonts - Google Fonts

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

fonts.google.com

 
▶︎ 눈누

 

눈누

상업용 무료한글폰트 사이트

noonnu.cc

 
저는 <눈누>라는 사이트를 이용해서 폰트를 찾아볼려고 합니다!
 
*여기서 꿀팁!
저는 <눈누> 사이트에 들어가서 <모든 폰트> 탭을 클릭하고 <예시 문구 적기> 란에다가 저희 블로그 제목을 입력해 보면서 어울리는 폰트로 찾아봤어요!
 

 
이렇게 하니까 폰트를 직접 적용하지 않아도 느낌을 볼 수 있어서 좋더라고요!
 
제가 생각했을 때 블로그 제목에 어울리는 폰트는
1. 눈에 잘 들어오고 (크기나 굵기가 크면 좋을 것 같아요)
2. 호불호 없이 깔끔해야 함
인 것 같더라고요. 위 두 가지 조건을 충족하면서 저희 별밤의 특징이 잘 나타나는 폰트면 가장 좋을 것 같네요! (근데 아직 못 찾음ㅠ)
 
그래서 가장 만만하고 무난한 지마켓산스체를 선택했습니다!

결정하신 폰트를 클릭하신 후에 아래사진에서 보이는 것과 같이 <웹 폰트 사용>이라는 칸에서 코드를 복사하시면 됩니다.

 


2. 스킨 편집

원하는 폰트를 찾으셨다면 티스토리의 <스킨 편집> 페이지로 들어가야 합니다.
(지난 포스팅에서 말한 것처럼 블로그 홈에서 단축키 Q를 누르시면 블로그 관리 홈페이지로 넘어갑니다!)

 

[티스토리 블로그 만들기] 북클럽 스킨 디테일 설정하기

안녕하세요! 다시 돌아온 입니다! 지금까지는 엉망진창으로 만들어버린 티스토리를 복구하느라 바빴지만.. (엉망진창 티스토리 확인하기) 이제는 드디어 저희 티스토리를 조금 더 예쁘게 바꿔

starsufers.tistory.com

 
<HTML 편집>을 누르셔서 <CSS> 화면 페이지로 들어가 주세요.

 

 
1) <CSS> 화면에서 ctrl+f로 '@charset "utf-8";'를 찾기

그 아래에 <눈누> 사이트에서 복사한 웹폰트를 복붙 해주세요.

@charset "utf-8";

웹폰트 복붙 전 - 후

 

2)  <CSS> 화면에서 ctrl+f로 'header h1'을 찾기

header h1이 포함되어 있는 것들 중에서 가장 첫 번째 친구를 찾으시면 됩니다.

header h1

 
위 박스에서 'font-family' 부분에 변경할 폰트명을 입력해 주시면 되는데요!
변경할 폰트명은 <눈누> 사이트에서 복사한 코드의 'font-family' 부분에서 확인할 수 있어요!

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 
이게 눈누에서 복사한 폰트 코드인데, 제 폰트명은 'GmarketSansMedium'이 되겠습니다!
이걸 티스토리의 <CSS> - <header h1> - <font-family>  부분에서, 기존에 입력되어 있는 폰트명을 삭제하시고 입력해 주시면 돼요.

(좌) 기존 - (우) 변경 후

그리고 가장 중요한 적용버튼을 누르시면!!!

 
요로코롬 바뀐 폰트를 보실 수 있습니다!!!
더 극적인 변화를 강조하기 위해서 전후 사진을 보여드리자면

이랬는데.. 요래됐습니당!!!

 
어떠신가요??
조금 더.. 세련되고.. 트렌디하고... 요즘 시대 같은.. 그런 블로그 같지 않나요?!?!

대충 짱뿌듯한 짤

 
이제 폰트 변경 방법을 알아버렸으니 앞으로 심심할 때마다 한 번씩 바꿔보도록 하겠습니다!!
더 좋은 폰트들이 있다면 댓글로 살포시 추천해 주시면 감사하겠습니다. 🥹
 
다음번에도 티스토리를 조금 더 팬시하게 바꿀 수 있는 정보들로 찾아오겠습니다!
많은 관심 부탁드려요~!!
 
아차차.. 우리 <별 헤는 밤> 앱에는 더욱더 크고 거대한 관심 부탁드립니다!!

 
별 헤는 밤에 큰 관심 보이기

 

별 헤는 밤: 밤하늘, 별자리, 여행정보와 날씨예보까지 - Google Play 앱

오늘부터 별잘알! 오늘밤 별자리 정보, 날씨·광공해·월령까지 고려한 '관측적합도', 주변 관측지 검색으로 누구나 쉽게 밤하늘을 즐겨보세요.

play.google.com