티스토리 PC버전 웹폰트로 변경하는 방법 어렵지 않아요

✔ 티스토리블로그 웹폰트로 변경하기

1. 원하는 글씨체(웹폰트) 확인 및 복사

2. 티스토리 스킨편집에서 변경적용하기

---

1. 원하는 웹폰트 찾기

티스토리는 기본서체 외 5가지를 선택할 수 있는데요. 이 글씨체가 아닌 다운로드한 다른 글씨체를 적용하려면 어떻게 해야 할까요?? 무료글꼴 사이트가 있습니다. 저는 많이 알고 계시는 '눈누'라는 사이트를 이용했습니다.  

 

사이트에 접속 후 원하는 폰트를 찾아서 웹폰트를 복사해 주세요. 폰트를 클릭하면 각 폰트별로 사용할 수 있는 범위가 다릅니다. 라이선스 요약표에 카테고리, 사용범위와 허용여부가 표시되어 있으니 꼭 라이선스 요약표를 확인 후 사용 하셔야 합니다. 저는 고운 바탕이라는 웹폰트를 선택했습니다.

 

우측 중간쯤에 웹폰트로 사용이라고 보이는데요. 해당 내용을 복사해 줍니다. 영역을 잡아서 복사해도 되고, '웹폰트로 사용' 글씨 옆에 네모 두 개가 겹쳐진 아이콘을 클릭하셔도 복사됩니다.

 

 

 

 

 

 

※ 혹시 모르니 꾸미기-스킨변경에서 스킨 보관을 하고 변경 해 주세요! 

2. 티스토리 스킨편집에서 변경적용하기

 

티스토리-관리설정-꾸미기-스킨편집에서 우측 html편집을 눌러주세요. HTML 옆 CSS를 눌러줍니다.

 

폰트를 변경하려고 검색해 봤는데 CSS까지는 잘 찾아 들어갔지만 그다음부터가 어렵더라고요. 저는 북클럽스킨을 사용 중이고, CSS로 들어가면 아래와 같이 나옵니다. /*Web Font Load */ 아래쪽으로 @import url이 두줄 있는데요. 바로 아래쪽으로 눈누에서 복사한 웹폰트를 붙여 넣기 합니다.

 

아래 이미지에서는 27번째에 붙여 넣기 했어요.

 

그리고 다음! 전체를 적용하려면 CSS에 있는 font-family를 모두 내가 원하는 폰트로 바꿔서 입력해 줘야 하는데요.

먼저 붙여 넣은 웹폰트에서 폰트이름을 따옴표 포함해서 복사해 주세요. 그리고 Ctrl+F를 눌러 font-family를 검색해 줍니다. 각 font-family: 옆에는 현재 폰트가 입력되어 있을 거예요. 현재폰트를 지우고 복사한 웹폰트를 따옴표까지 다 입력해 줍니다. 

 

 

모두 변경했다면 우측 상단 적용을 눌러주세요! 그리고, 티스토리 메인 다시 접속해 보면 폰트가 변경된 것을 확인할 수 있습니다. 다른 스킨에서도 동일한 방법으로 웹폰트를 적용할 수 있습니다.

 

전체 적용 해 보니 좀 흐린 것 같아서 저는 다른 웹폰트로 다시 변경해 보려고 합니다. 또렷하면서도 가독성이 좋은 깔끔한 글씨체를 찾아봐야겠습니다. 한 번 해 봤으니 두 번째는 더 쉽고 빠르게 할 수 있을 것 같아요~!! 

 

 

 

 

❗❕ 위 방법으로는 PC버전 폰트만 변경되며 모바일에서는 기존 폰트로 보입니다. 모바일버전도 변경하고 싶다면 CSS에서 모바일 영역을 하나하나 찾아 변경 적용해줘야 한다고 해요. 저는 아직 초보라서 PC버전 성공을 하면 모바일은 나중에 해 보려고 합니다.