블로그 본문 폰트, CSS로 변경하기

티스토리 본문 폰트 변경 기록

티스토리 블로그를 운영하다 보면, 어느 순간부터 본문 폰트가 눈에 거슬리기 시작한다. 내용이 아무리 정돈되어 있어도, 폰트가 주는 인상이 그것을 흐려놓는 경우가 많다. 나 역시 그런 이유로 본문에 적용되는 기본 글꼴을 바꾸기로 결심했다.

 

이번에 손을 댄 부분은 #article-view였다. 티스토리에서 글의 내용이 실제로 출력되는 가장 핵심적인 영역이며, 이 부분을 수정하면 대부분의 본문 텍스트에 일괄적으로 새로운 폰트를 적용할 수 있다. 이전에도 여러 방식으로 시도해 본 적은 있었지만, 이번에는 폰트 지정의 우선순위와 시스템 호환성까지 고려하여 보다 신중하게 접근했다.

---

적용한 CSS 코드

/* 만년교생의 커스터마이징 시작 */
/* #article-view는 티스토리 본문 콘텐츠 전체에 적용되는 공통 스타일입니다. */
#article-view {
  margin: 0;
  padding: 20px 20px 50px;
  word-wrap: break-word;
  color: #e0e0e0;
  min-height: 370px;
  font-family: 'ChosunGu', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}
/* 만년교생의 커스터마이징 끝 */

 

이 코드에서 가장 중심이 되는 부분은 역시 font-family이다.

 

가장 앞에 배치한 'ChosunGu'는 내가 블로그에 담고자 하는 분위기와 가장 잘 맞는 서체다. 적당한 곡선과 안정된 자폭이 특징이며, 문장의 흐름을 부드럽게 이어주는 데에 도움이 된다.

 

다만 모든 시스템에 이 글꼴이 설치되어 있는 것은 아니기 때문에, 그 뒤에는 다양한 시스템 글꼴을 대체 순서로 나열해 두었다. 만약 첫 번째 글꼴이 적용되지 않는 환경이라면, 그 다음 대안으로 자연스럽게 넘어가도록 설계한 것이다.

 

폰트를 변경하고 나니 확실히 본문을 읽는 리듬이 달라졌다.

 

글자가 화면 위에 가볍게 떠 있는 느낌이 줄고, 한 문장 한 문장이 중심을 잡은 채 또렷하게 전달된다. 가독성이 높아진 것도 만족스럽지만, 무엇보다 내 글의 성격이 더 분명하게 드러난다는 점에서 의미가 컸다.

 

이번 수정을 통해 폰트 하나가 전달하는 정보의 깊이와 인상을 얼마나 크게 바꿀 수 있는지를 다시 한 번 실감했다.