본문 바로가기
블로그 꾸미기

[티스토리 스킨 편집] 블로그 폰트 바꾸기(+무료 한글폰트 사이트)

by 12th_moon 2020. 10. 14.

 

 

 

 

 

블로그를 꾸밀 때 수고 대비 가장 큰 효과를 볼 수 있는 걸 찾아본다면

바로 블로그의 폰트를 바꾸는 게 아닐까 싶다.

 

지금 쓰는 스킨도 새로 만든 것이 아니라

기존의 티스토리 스킨인 Book Club스킨에서 하나 둘 고친 것이다 보니

기본 스킨에서 솔직히 큰 차이는 없달까?

(아무리 이것저것 뜯어고쳐봤자 전체적인 구조가 변하질 않았으니ㅠ)

 

그래서 스킨을 입히자마자 처음 시도한 건 바로 폰트 바꾸기~

 

 

 

 

일단 무료 한글 폰트 사이트에 접속한다.

 

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

 

이미 알 사람은 다 아는 무료 한글 폰트 사이트 '눈누'.

무료 한글 폰트가 귀하디 귀한 요즘 같은 때에 상업적 이용도 가능한 데다가,

폰트를 직접 다운로드할 수도, 또는 웹 폰트로도 마음껏 사용할 수 있어서

한글 폰트가 필요할 땐 무조건 뒤도 안 보고 달려가는 곳이다.

 

눈누에 접속해 보면 이렇게 추천 폰트가 첫 화면에 뜨는데

일단 무시하고 두 번째 메뉴인 '모든 폰트'를 클릭!

 

모든폰트 메뉴로 들어가 보면 스크롤을 쭉쭉 내리면서 모든 폰트를 볼 수 있는데

보다 보면 생각보다 무료 폰트가 많다...!

 

그래서 항상 주황색으로 표시한 체크박스를 활용하는 편인데

손글씨의 경우 웹에서 가독성이 상당히 떨어지기 때문에

난 주로 손글씨는 체크 해제를 하고 고딕, 명조 위주로 폰트를 찾곤 한다.

 

그리고 각 폰트당 예제로 문구가 있긴 하지만

아무래도 같은 문구일 때 비교가 더 쉽기 때문에

 

 

이렇게 같은 문장으로 만들어 놓고 폰트를 살펴보면 좋다.

 

그리고 지금 보이는 '카페24 고운밤'처럼

자주 사용하는 특수문자가 없는 폰트가 몇 있기 때문에

간단한 문구 + 자주 쓰는 특수문자로 폰트를 찾으면 좋다.

 

(카페24 고운밤은 약간의 손글씨 느낌이 나는 명조이면서

가독성도 떨어지지 않아서 지금 사용하고 있긴 하지만

특수문자 지원이 안 되는 게 너무 아쉽다ㅠㅠ)

 

어쨌든 이런 방식으로 마음에 드는 폰트를 찾은 뒤 이름을 클릭해준다.

이름 옆에 보면 다운로드 버튼이 있어서 문서나 포토샵, 일러스트에서도 사용 가능하지만

지금은 블로그를 꾸밀 웹 폰트가 필요하기 때문에

웹폰트로 사용 옆의 복사하기를 클릭해준다.

 

그리고 이제 티스토리의 블로그 관리로 들어가서

스킨 편집 > html 편집 > CSS를 눌러 css문서로 들어간다.

 

 

그럼 이렇게 @import 또는, @font-face가 보이는데

이 밑으로 방금 복사했던 코드를 그대로 붙여 넣기 한다.

그리고 그 밑의 34번째 줄에 보이는 bodyfont-family 중 첫 번째

'AppleSDGothicNeo'를 내가 바꾸려는 폰트의 이름, 'CookieRun-Regular'로 바꿔준다.

 

**그 뒤로 'Noto Sans KR', sans-serif가 연이어 보이는데

두 번째의 'Noto Sans KR'은 첫 번째 폰트가 무슨 이유로든 적용이 안 될 때 적용하는 폰트,

그리고 마지막 sans-serif는 두 번째 폰트마저도 적용이 안될 때

산세리프체(명조체 같은 삐짐이 없는)를 적용하라는 표시다.

 

그리고 적용을 누르고 새로고침을 눌러주면

이렇게 기본 서체에서 쿠키런 Regular로 폰트가 바뀐 걸 볼 수 있다 :)

 

 

그런데 어라?

타이틀은 바뀌지 않았다. 심지어 기본 중의 기본인 명조체라니.

 

이 타이틀까지 바꾸려면 다시 html 편집 > CSS로 들어가서

 

마찬가지로 #header h1font-family도 바꿔주면 된다.

(스킨이 달라도 h1이 타이틀일 가능성이 99.9%이니 ctrl + f를 눌러서 h1을 찾자!)

 

그럼 타이틀을 포함해 블로그의 모든 서체가 바뀌었다.

이 정도면 노력 대비 효율 1000000%인 듯!

 

 

 

 

 

댓글