티스토리 폰트 글씨체 바꾸는 법(feat.눈누)

검색을 해서 글들을 보다보면 가독성 좋은 예쁜 폰트를 적용해서 사용하는 티스토리들이 많이 보이더라고요. 사실 이런 외적인 부분보다는 글 포스팅이 훨씬 중요하긴 하지만, 은근히 신경쓰여서 계속 폰트를 바꾸고 싶었었는데, 드디어 한번 시도해보았습니다! 티스토리 폰트 바꾸는 법입니다.

 

 

 

눈누 사이트에서 폰트 선택하기

티스토리는 스킨편집을 통해서 폰트를 변경할 수 있어요. 거기서 사용할 폰트는 당연히 내 컴퓨터에 있는 폰트를 사용해야 하지 않을까 했었는데요, 그런 방법도 있지만 "눈누"라는 사이트를 통해서 편하게 폰트를 변경할 수 있어요.

 

눈누 사이트에 가셔서 블로그에 사용할 폰트를 선택하세요. 많은 폰트가 있고 라이선스가 어디까지 허용되는지도 나와있기 때문에 편리하게 폰트를 선택할 수 있답니다.

 

저는 넥슨 lv.2 고딕체가 깔끔해보여서 라이트버전을 먼저 선택해봤어요. 클릭해 들어가면 폰트 미리보기 창에서 미리 어떻게 폰트가 출력되는지 볼 수가 있고 내 컴퓨터에 다운로드를 받을 수도 있답니다. 아래처럼 라이선스 요약표가 폰트마다 있기 때문에 어느 범위까지 무료로 사용 가능한지 확인 후 사용하시기 바랍니다. 

 

눈누 사이트에서 폰트 별 라이선스 요약표를 제공합니다.

 

 

 

 

 

 

 

웹폰트로 사용 코드 복사

 

폰트를 선택했다면, 웹폰트로 사용 부분에 코드가 있어요. @font-face로 시작하는 코드인데 작은 네모 두개가 겹쳐 있는 아이콘을 눌러 복사를 해주세요. 이제 스킨 편집에 가서 이 코드를 붙여 넣음으로써 내 블로그에서 이 폰트를 사용할 수 있게 됩니다.

 

눈누 사이트에서 폰트 선택하여 "웹폰트로 사용" 부분 복사하기

 

 

 

 

 

 

 

스킨 편집 - css 수정

 

1) 폰트 등록하기

티스토리 설정 > 스킨편집 > html 편집 > css 탭에서 코드를 수정할 수 있어요. 맨 윗 줄에는 @charset "utf-8"이라고 쓰여 있는데 그 아랫줄에 붙여넣으시면 됩니다. 전 여러 개를 사용해보고 싶어서 맘에 드는 폰트 여러 개를 넣어두었습니다.

 

티스토리 스킨편집 > css 수정으로 웹폰트 등록하기

 

 

 

 

 

2) 블로그에 폰트 적용하기

위에 붙여 넣은 코드에 보시면 font-family : 'NEXON Lv2 Gothic Light'; 라고 폰트의 이름이 쓰여 있어요. 내 블로그의 body 부분의 폰트로 사용하겠다고 이름을 바꾸어주면 됩니다.

 

바꾸는 부분은 조금만 스크롤을 내려 보시면 /*Type Selector Reset */ 하단의 body {  부분에 있어요. 기본으로는 AppleSDGothicNeo 가 있었는데요, 저는 혹시 바꾼 폰트가 맘에 안 들까봐 지우지 않고 /* */ 로 주석 표시를 해두었어요. 주석을 하면 그 부분은 적용이 되지 않습니다.

 

body 부분에 폰트 적용하기

 

적용 버튼을 누르고 좌측에 적용된 화면 새로고침 버튼을 누르면 폰트가 아래와 같이 바뀐 것을 보실 수 있습니다. 너무 흐리게 보여서 저는 다시 Regular 버전으로 폰트를 바꾸었답니다. 바꾸고 나니 글씨가 좀 날씬해져서 좀 더 마음에 드네요.

 

 

 

 

 

 

폰트 변경 전 기본 폰트

폰트 변경 후 넥슨 고딕체

그런데 글 목록에는 적용이 되었는데, 실제로 글 내용에는 폰트가 반영이 되지 않더라고요. 그럴 때는 html 보기를 해서 보시면 내가 쓴 본문 글에 span으로 폰트가 설정되어 있는 것을 확인하실수 있습니다. 그걸 지우면 기본 서체로 올라가게 됩니다.

 

 

 

 

 

3) 블로그 제목 (h1 태그)에 폰트 적용하기

다른 부분에도 폰트를 적용할 수 있는지 찾아봤는데 h1 태그에 적용할 수 있네요. 이 부분은 메이플스토리 체로 바꿔봤더니 블로그 제목이 귀엽게 바뀌었습니다. 제 북클럽 스킨 기준으로 150 줄 근처에 있었고요. #header h1 부분을 찾으시면 됩니다. 

 

어려우신 분들은 그냥 Ctrl+A로 전체 선택 뒤 메모장에 붙여 넣으시고 "font-family"로 찾기를 하세요. 그리고 폰트 명을 변경한 뒤 다시 전체 복사하여 css 창에 덮어 씌우시면 됩니다.

 

h1 태그 폰트 변경하기

 

 

 

 

 

 

 

변경 전 블로그 제목

변경 후 블로그 제목

 

 

여기까지 티스토리 블로그 폰트 변경하는 방법 알아보았습니다.