수익형 블로그/블로그 관리

티스토리 폰트 변경하기 (feat. 무료상업폰트 눈누 이용)

코드생활 2021. 1. 5. 20:07

 

안녕하세요. 코드 서핑입니다.

블로그를 운영하면서 나만의 블로그 스타일을 만들기 위해서 조금씩 매만지고 있는 중입니다.

그중에서 가장 신경 쓰이는 부분 중 하나가 '폰트'인데요.

 

글을 읽는데 있어서 보여지는 부분중, 가독성에 영향을 미치는 가장 큰 요인 중 하나는 폰트입니다.

문장 구성도 중요하지만 보기 좋은 폰트는 글을 읽는데 눈을 편하게 해 주고 글의 내용에 집중할 수 있게 도와주죠.

따라서, 글을 집중해서 읽는 다는 것은 방문자가 글에 머무는 체류시간이 길어진다는 의미이고, 이탈률이 낮아진다는 의미이기도 합니다. 

 

그런데, 아무리 좋은 폰트도 '행간'과의 조화가 없다면 의미가 없습니다.

 

 

▲행간이 줄어든 가독성 떨어지는 글

 

 

예를 들어보겠습니다. 위 사진은 제 블로그 '히어로 시즈' 포스팅 내용 중 일부입니다. 본문 행간 여백 값을 줄였을 때 글자들이 빽빽해서 한눈에 봐도 읽기에 부담스럽습니다.

 

행간 여백을 늘려보겠습니다.

 

▲행간 조정 후 모습

 

 

같은 글을 원래대로 행간 조정한 후의 모습입니다.

글의 여백이 생기면서 한결 보기 편해졌습니다. 이렇듯 '보여지는 부분'은 폰트, 행간 모두 가독성에서 중요한 부분을 차지합니다.

 

그래서 오늘은 기존 폰트가 가독성이 떨어지는 것 같아서 폰트를 변경해봤습니다. (지금 보고 계시는 폰트는 수정 후 폰트입니다.)

 

지금 보시는 폰트 이름은 '이롭게 바탕체'입니다.

기존의 나눔고딕과 달리 딱딱한 느낌보다는 둥글고 유한 느낌을 줍니다.

확실히 글을 볼 때 가독성이 좋아진 듯한 느낌입니다.

 

폰트는 정말 다양하기 때문에 가독성이 좋으면서 개인 취향에도 맞는 폰트를 골라야 합니다.

그 고민을 덜어줄 폰트 고를 때 유용한 사이트인 '눈누'를 소개합니다.

 


 

 무료 폰트 사이트 '눈누'

noonnu.cc/

 

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

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

noonnu.cc

 

'눈누'에서는 다양한 폰트들을 직접 써보고 고를 수 있습니다. 상업적으로 이용이 가능한 폰트들이고, 세부적인 폰트 라이선스 약관에 대해서는 마음에 드는 폰트를 클릭 후 아래에 있는 폰트 라이선스를 참고하시면 됩니다.

 

 

'이롭게 바탕체' 폰트 라이선스

 

 


 

 폰트 변경하기

 

 

제가 선택한 '이롭게 바탕체'를 기준으로 설명 드리겠습니다. 다른 폰트들도 대체적으로 비슷합니다.

마음에 드는 폰트를 클릭하고, '웹폰트로 사용'복사하기를 눌러 코드를 복사해줍니다.

 

 

 

 

이제 코드를 적용 시켜줘야 겠죠. 블로그 관리에서 [꾸미기] - [스킨 편집] - [html 편집]으로 들어가 줍니다.

 

 

 

 

[html 편집] - [CSS] 탭으로 들어가 줍니다. 복사한 코드를 위쪽에 복사해 넣어줍니다.

이 과정은 '이롭게 바탕체'를 웹 cdn 서버에서 불러와서 사용할 준비를 하는 과정입니다.

 

 

 

 

그다음, ctrl + f를 눌러서 'font-family'를 검색해 줍니다.

그럼 여러곳이 나오는데 textarea 또는 body에서 사용하는 font-family에 'iropke batang'을 추가해 줍니다.

참고로 이 부분은 스킨마다 다를 수 있습니다.

 

끝났습니다. 이제 적용 후 블로그에서 다시 새로고침 하면, 원하는 폰트로 바뀐 것을 볼 수 있습니다.

 

 

읽어주셔서 감사합니다.

유익하게 보셨다면 공감 한 번 눌러주세요.😀