본문 바로가기
Adsense

티스토리 북클럽 폰트 변경하기

by 5cm 한량 2023. 6. 13.

가독성을 높이기 위해서 '네이버 나눔스퀘어 네오' 폰트로 티스토리 글씨체를 바꾸려 한다.  html 코드에 복사해서 넣으면 된다. pc 에서는 다운을 받아야 하지만, 웹폰트는 경로만 설정해주면 된다. 어렵지 않다. 일단 티스토리 메뉴에서 html 편집으로 들어가야한다.  아주 자주 이용하는 곳이기이 때문에 이 부분은 꼭 알아두어야 한다.  

 

티스토리 북클럽 폰트 변경하기

1. 웹폰트 소스경로 코드를 복사할 곳은 바로 눈누

2. 웹폰트 코드를 복사해서 티스토리 html 편집 > css 상단  @charset "utf-8"; 부분 아래에 웹폰트 복사한것을 넣는다. 

 

▶ 폰트를 바꾸기 위해서 검색을 해본것 중에서 제일 간단한 방법이다.  이 방법 말고도 아랫쪽 코드에서 이름을 바꿔주는 방법이 있던데, 그것보다 이 방법이 간단한것 같아서 난 이방법을 이용하기로 한다.  css 쪽으로 들어가서 첫줄 @표시 아래에 '눈누' 에서 복사해온 폰트 콘드를 넣기만 하면 된다.   눈누는 상업적으로 써도 되는 무료 폰트사이트이다.  필요한 폰트를 마음껏 쓸 수있으니 걱정말고 사용해보시길. 나역시 그곳에서 폰트를 가져왔다.

 

눈누 사이트

 

 

네이버 나눔스퀘어 네오를 사용할것이다.  웹폰트로 사용의 복사버튼을 클릭해서 코드를 복사한다.  마음에 드는것을 어떤 것이든 골라서 사용해본후, 복사해오면 된다. 가독성이 좋은 것이 나눔 스퀘어네오로 생각되어서 이것을 복사한다.  처음에는 다운로드를 받아야되나 고민했는데 웹폰트는 지정경로만 복사해서 티스토리에 넣어주면 된다.  엄청 간단하다.  쫄필요 없다.  아랫쪽 사진에서 웹폰트 부분을 복사해서 넣으면 된다. 

 

 

 

 

@ 표시 아래에 복사해온 웹코드를  넣는다. 신기하네.  이렇게 복사해서 넣기만 하면 알아서 작동한다.  아주 편리하다. 

 

 

 

기존의 폰트와 충돌이 일어날지 모른다고 아랫쪽에 원래 있던 폰트를 찾아서 덮어씌워준다. 꼭 해야되는것인지는 모르겠다. 검색해본 자료중에서 하는게 좋다고 해서 나도 하기로 한다.  ctrl+f 를 눌러서 font-family 를 입력해서 위치를 찾는다. 

 

 

font-family 에 애플고딕네오가 네어있는데 그 부분에 새로 복사한 나눔스퀘어 폰트명을 기존의 코드위에 덮어 씌운다. 

 

 

교체후.

 

 

 

글씨크기 및 행간거리 조정

폰트크기를 조절하는 곳은 font-family 부분 아랫쪽에 font-size 1 em 으로 숫자를 바꾸면 글씨가 커진다.  이 부분은 작동이 잘 되는데 행간 거리는 조정이 안 된다.  line-hgight 1.25 로 지정이 되어있어서 5.25로 늘려봤는데 행간 거리가 늘어나지 않는다. 이상하다. 원래는 이 부분에서 조정이 되야하는것 같은데 말이다.    이 방법말고 또 다른 방법이 하나 더 있다.  

 

 

 

▶ Entry Content 를 눌러서 h1, h2, h3 를 지나서 P 부분을 찾는다. 

 

 

 

entry-content P 에서 폰트 사이즈는 1.07 em, Line-height 는 2로 지정했다.  역시 행간 조정이 안된다.  왜 그렇지 ?  

 

 

행간거리까지 완전하게 숙지하지는 못했지만 마음에 드는 가독성 좋은 티스토리 폰트를 찾아서 수정했다.  티스토리에 재미를 좀 붙여보고 싶다.  그냥 마음을 비우고 열심히 기록하고 정리하기로 한다.