티스토리 기본폰트 변경하는 방법 (초간단 ver)

 

조금더 가독성을 올리고 싶거나,

나만의 개성있는 웹페이지를 만들고 싶을 때 폰트만한 게 없죠.

감성적인 시나 글을 위주로 쓰는 사람이라면

명조체나 부드러운 폰트를 사용하는 게 좋고,

전달력 있고 가독성 좋은 글을 써야할 땐

고딕체나 깔끔한 폰트를 써야 내용 전달력이 더욱 좋습니다.

 

그래서 오늘은 티스토리 폰트를 변경하는 아주 쉬운 방법을 공유해드리려고 해요.

생각보다 쉬워서 금방 따라하실 수 있으니 저만 믿고 하나하나 함께 해보아요!

 

 

📘목차
1. 눈누에서 원하는 폰트를 찾아주세요.
2. 티스토리 CSS편집창에 폰트 코드를 넣어 적용시켜 주세요.

 

1. 눈누에서 원하는 폰트를 찾아주세요.

상업적으로 사용할 수 있는 무료 폰트가 가득한 눈누라는 사이트에서 변경하실 폰트를 찾아주세요!

저는 그중에서도 프리텐다드(Pretendard)라는 폰트를 티스토리 블로그에 적용시켜 보도록 하겠습니다.

해당 페이지 우측 부분에 보시면 웹폰트로 사용이라고 적혀있고 아래 '폰트 코드'가 적혀있는 것을 확인하실 수 있습니다.

이것을 드래그해서 복사해 주세요.

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

이렇게 복사한 '폰트 코드'를 이제 티스토리로 돌아와 css편집창에서 폰트 적용을 시켜 주면 되는데요,

 

2. 티스토리 CSS편집창에서 폰트 코드를 적용시켜 주세요.

 1) 블로그 관리 창 > 스킨 편집 > html편집 > CSS > 복사한 웹 폰트 상단에 붙여 넣어주세요. 그리고 font-family에 적혀있는 폰트 이름을 복사해 주세요. 저 같은 경우에는 'Pretendard-Regular'가 되겠죠. 혹시 모르니 중간중간에 적용 버튼은 필수!

 2) 이렇게 CSS에 웹폰트를 적용했다면, 다시 Ctrl + F 버튼을 눌러  'font-family' 단어를 검색해 주세요.

스킨마다 html 위치가 다를 수 있는데 저는 현재 Odessey 스킨을 이용 중이라 폰트 패밀리가 많이 뜨는데, 그중에서 앞에 Body가 있는 font-family를 찾아주시면 됩니다. 

 

그리고 나서 아까 복사해 둔 폰트명을 맨 처음 ' ' 사이에 교체해주시면 됩니다.font-family를 보시면 뒤에 여러 가지 폰트명들이 보이실 텐데요, 혹시 맨 앞에 폰트가 오류가 날 경우를 대비해 준비해 둔 대체제 폰트를 의미합니다.

 

 

🔎함께 보면 좋은 글

 

🧷2022.01.21 - [파이프라인 만들기/티스토리 꿀팁] - 티스토리 플로팅 자동 목차 기능 TOC 추가 (오디세이 Odyssey skin)

티스토리 플로팅 자동 목차 기능 TOC 추가 (오디세이 Odyssey skin)