[블로그] 티스토리 본문 폰트 변경(글꼴 변경)을 해보자 (FastBoot 스킨 기준)
티스토리 본문 폰트 변경(글꼴 변경)을 해보자 (FastBoot 스킨 기준)
블로그를 운영하다 보면 기본적으로 제공하는 글꼴이 마음에 들지 않거나 꼭 그렇지 않더라도 분위기 전환을 위해 다른 글꼴로 일괄 수정하고 싶어 지는 경우가 있다.
하지만 이미 한참을 작성해 놓은 글들을 전부다 변경할 수도 없는 노릇이고 그렇다고 그냥 넘어가자니 아쉬울 수 있는데 이런 경우 구글 웹폰트를 이용하면 한꺼번에 글꼴을 변경하여 적용할 수 있다.
※ 단 기본 글꼴을 유지하고 변경 없이 글을 작성한 경우만 해당하고 글을 작성하면서 인위적으로 글꼴을 변경하여 발행한 적이 있다면 적용이 되지 않는다.
본문 수정
대부분의 스킨의 적용방법이 비슷하겠지만 일단 이 블로그에서 사용하고 있는 FastBoot 스킨 기준으로 적용을 해 보았다.
우선 어떤 글꼴을 적용할지 정해야 하는데 구글 웹폰트 사이트를 가보면 종류를 확인할 수 있다.
구글 웹폰트 사이트 : https://fonts.google.com/earlyaccess
글 작성을 위해 슬쩍 둘러본 바로는 한글 글꼴은 약 11개 정도 존재한다.
Nanum Pen Script (나눔 펜)
Nanum Brush Script (나눔 브러쉬?)
Nanum Gothic (나눔 고딕)
Nanum Gothic Coding (나눔 고딕 코딩)
Nanum Myeongjo (나눔 명조)
jeju Myeongjo (제주 명조)
jeju Hallasan (제주 한라산)
KoPub Batang (코펍 바탕)
Noto Sans KR (노토 산스)
Hanna (하나)
이제 글꼴을 정했으면 적용을 해야 하는데 원하는 글꼴에 영어로 된 코드들이 보일 것이다.
변경된 점을 한눈에 보기 위에 테스트로 '제주 한라산'체 사용
이 중 Link의 @import로 시작 되는 코드를 복사하여 블로그 관리자 화면의 HTML/CSS 편집의 CSS 탭에 들어가 가장 위에 붙여 넣기를 해준 뒤 Example에 나온 대로 CSS 코드 들 중 font-family: 로 시작하는 코드를 찾아서 뒤에 글꼴명을 추가해 주면 작업은 간단하게 완료가 된다.
추가 한 뒤 저장을 하면 본문의 글꼴이 변경될 것이다.
본문 글 변경 완료
본문 외 다른 부분 수정
본문 변경은 완료되었지만 추가로 헤더 메뉴와 사이드바 제목 등은 변경이 되지 않은 것을 볼 수 있다.
해당 부분을 적용하기 위해서는 글꼴명을 추가해야 하는 부분이 더 있는데 이 부분은 설명 하기 애매하니 스샷을 참고하면 좋을 것이다.
(같은 스킨을 사용하더라도 중간에 수정을 했다면 다를 수 있기 때문에 참고하면 된다. 물론 거의 변경된 것은 없지만...)
CSS의 위쪽에 위치 하며 #sidebar를 검색해서 찾아가면 편할 것이다.
사이드바 메뉴의 글꼴들이 변경 됐다.
CSS의 거의 제일 아래쪽에 위치하며 기본 글꼴로 제공되는 Arial을 검색하면 찾다 보면 스샷과 같은 부분을 찾을 수 있을 것이다.
헤더의 글꼴도 변경 완료.
다른 스킨에 적용하는 경우
만약 다른 스킨을 사용하고 있더라도 기본적인 적용 방법은 같으며 간단하게 설명하자면
1. CSS에 글꼴 LINK 주소추가.
2. CSS의 font-family: 부분에 글꼴 추가.
3. 그래도 변경이 안된다면 기본 글꼴을 적용하는 부분을 찾아서 글꼴을 추가.
정도가 될 듯하다.
그 외
일단 이렇게 하면 블로그의 모든 글꼴은 변경이 가능하다.
글꼴 적용이 이런 방식으로 나뉘어 있기 때문에 본문만 적용하거나 아니면 메뉴까지 적용하거나 또 아니면 본문과 메뉴를 각각 다른 글꼴로 적용할 수 있는데 이 방법은 기존의 글꼴이 나오고 그것을 한번 더 변경해주는 방식이기 때문에 자칫하면 블로그가 느려질 수도 있으니 이왕이면 하나의 글꼴 만을 적용하는 쪽을 추천한다.