웹폰트로 티스토리 폰트 변경하는 방법

이번 시간에는 구글 웹폰트를 이용하여 티스토리 폰트 변경을 해 볼 것이지만, 무료 한글 폰트 사이트인 눈누를 사용해도 같은 방식이니 원하는 폰트가 있는 곳을 선택하여 따라와 주시면 됩니다!

 

▶이어지는 글: 티스토리 폰트 사이즈, 색, 굵기 수정하기

티스토리 폰트 변경하는 방법

 

 

1. 구글 웹폰트에서 원하는 폰트 복사하기

가장 먼저, 구글 폰트를 들어가 주세요. 한국어 적용이 되는 폰트만 보기를 원한다면 language 부분에서 korean을 눌러 주시면 한글 폰트들만 보일 겁니다. 그중 하나를 골라 클릭하여 페이지로 들어가세요. 살펴보고 괜찮다면 왼쪽 사진의 노랗게 표시된 선택하기 버튼을 눌러줍니다. 이후 오른쪽 최상단에 있는 선택된 폰트 보기를 눌러주세요.(다운로드하시면 안요!) 방금 담은 폰트가 보일 겁니다. 여기에서 링크가 아닌 임포트를 선택하고, 맨 오른쪽 사진에서 빨갛게 밑줄 친 부분만을 드래그하여 복사(ctrl+c)해주세요.

2. css편집에서 복사한 폰트 붙여 넣기

티스토리 블로그 관리자 페이지의 스킨편집에서 html편집창을 열어주세요. css편집으로 들어가서 이미 구글 폰트가 붙여 넣어진 곳 바로 아래에 복사해 온 웹폰트를 붙여 넣기(ctrl+v) 해 줍니다. 이때, 이미 붙여 넣은 코드가 많아 너무 복잡하거나, 티스토리 블로그에 적용하고 싶은 폰트가 너무 많다면 구글 폰트 사이트에서 원하는 모든 폰트를 선택한 뒤 한번에 구글 웹폰트를 복사하여 붙여 넣기 해 주세요. 이렇게 하면 한 줄의 웹폰트에 여러개의 폰트들이 적용되어 깔끔하게 정리할 수 있습니다.

3. 원하는 부분을 확인한 뒤 폰트 패밀리 수정하기

원하는 부분의 폰트를 수정하려면, 그곳이 어디에 있는지 위치를 알아봐야 하죠. 내가 쓴 것들 중 아무 글 하나를 골라 열고 마우스 우클릭, 검사를 눌러주세요. (혹은 그냥 F12를 눌러주셔도 됩니다.) 그럼 코드가 보이는 창이 뜰 텐데, 그 창 왼쪽 상단 커서 표시된 곳을 클릭한 뒤 폰트를 변경하길 원하는 부분을 눌러줍니다. 그러면 해당 코드로 위치가 바뀔 텐데, 여기서 아랫단에 있는 style 부분을 확인해 주세요. 예를 들어 본문을 변경하고 싶다면, 본문을 클릭하면 나오는 body 부분의 폰트 패밀리를 수정하면 되는 것이죠.

body {

  -webkit-text-size-adjust: 100%;  
font-weight: 400; 
font-family: 'Noto Sans KR', sans-serif0
;  font-size: 1em; 
line-height: 1.25;

저는 이렇게 나오는데, 여기에서 font-family: 'Noto Sans KR', sans-serif0 부분을 바꿔주시면 됩니다. 예를 들어 주아체라면, 이렇게요.  font-family: 'Jua'  이렇게 설정을 바꾼 뒤 오른쪽 상단의 적용을 누른 뒤 확인해 보시면 본문 글자체가 바뀐 것을 알 수 있을 것입니다.

블로그 폰트를 고를 때 주의할 점

폰트는 블로그 사용자의 경험이나 가독성, 미학적인 측면에서 중요합니다. 다만 이쁘다고 다 좋은 것은 아니고 전반적인 사용자 경험을 고려하여 선택하고 수정해야 합니다.

1. 블로그의 이미지에 어울리는 글꼴을 골라주세요. 블로그의 어투나 이미지에 따라서 진지한 톤의 블로그라면 정돈된 느낌의 글꼴을,  귀엽고 재치 있는 톤이라면 발랄한 느낌의 글꼴을 선택하는 것이 좋습니다. 이때 가독성을 낮추는 너무 장식적인 글꼴은 선택하지 않는 것이 좋습니다. 제일 중요하게 고려해야 할 사항이 가독성이기 때문입니다.
2. 글꼴 크기에 주의해 주세요. 모바일 기기에서 가독성을 확보할 수 있도록 최소 16px 정도의 크기가 좋습니다. 추천하는 사이즈는 16에서 18px 정도로, 자기 블로그의 주 구독자층에 따라 선택하여 주십시오.
3. 글꼴의 색상 역시 선명해야 좋은데, 티스토리 기본 스킨의 경우 기본 컬러가 진회색인 경우가 있으니 이를 배경색과 대비되는 가독성 높은 색으로 변경하여 주시는 것도 좋습니다.
4. 블로그 전체가 일관된 폰트를 사용해야 합니다. 본문 글꼴을 변경했다면 제목이나 블로그 타이틀 역시 함께 어울리는 글꼴로 변경하기를 권합니다.

이어지는 글 : 티스토리 폰트 사이즈, 색, 굵기 수정하기

티스토리 폰트 사이즈, 색, 굵기 수정하기