티스토리 Fastboot 글꼴 수정은 스킨을 처음 적용한 뒤 가장 먼저 손보게 되는 부분 중 하나였습니다. 반응형 구조는 마음에 들었지만 기본 글꼴과 문단 간격이 제 블로그 글 스타일과 맞지 않아 본문이 답답하게 보였습니다.
Fastboot 스킨은 CSS에서 글꼴과 line-height 값을 직접 바꾸는 방식으로 수정할 수 있습니다. 관리자 화면에서 HTML/CSS 편집 메뉴로 들어간 뒤 CSS 탭을 열면 기본 여백, 줄 간격, font-family 설정을 확인할 수 있습니다. 처음에는 margin이나 padding 값을 바꾸면 문단 간격이 달라질 줄 알았지만, 실제로 본문 가독성에 영향을 준 부분은 line-height였습니다.
목차
티스토리 Fastboot 글꼴 수정 전에 관리자 화면으로 들어가기
Fastboot 스킨 하단에는 관리자와 글쓰기 링크가 따로 보입니다. 관리자 화면으로 들어가면 스킨 편집 메뉴를 찾을 수 있고, 여기에서 HTML/CSS 편집 화면으로 이동할 수 있습니다. 스킨을 직접 수정하는 방식이라 저장 전에 기존 CSS를 따로 백업해 두는 것이 좋습니다.
관리자 화면에서는 왼쪽 메뉴의 꾸미기 영역을 보면 스킨, HTML/CSS 편집, 사이드바, 화면 설정 항목이 보입니다. 티스토리 Fastboot 글꼴 수정은 스킨 파일을 바꾸는 작업이기 때문에 HTML/CSS 편집 메뉴에서 진행했습니다.
CSS 탭에서 문단 간격을 먼저 확인하기
HTML/CSS 편집 화면으로 들어가면 상단에 HTML과 CSS 탭이 나뉘어 있습니다. 글꼴과 문단 간격은 CSS에서 수정하는 항목이라 CSS 탭을 열어야 합니다. 이 부분에서 margin, padding, border 같은 값도 보이지만 본문 줄 간격은 line-height 값을 보는 것이 더 중요했습니다.
line-height 값은 보통 1.8 정도면 본문이 조금 여유롭게 보였습니다. 글이 많은 블로그라면 2.0까지 올려도 답답함이 줄어들지만, 너무 높이면 문단이 늘어져 보일 수 있어 실제 화면을 보면서 조정하는 편이 좋습니다.
나눔고딕 적용을 위한 글꼴 주소 추가
티스토리 Fastboot 글꼴 수정에서 나눔고딕을 쓰려면 CSS 상단에 구글 폰트 주소를 넣고, font-family 맨 앞에 Nanum Gothic을 추가하면 됩니다. 이때 @charset 아래쪽에 폰트 import 구문을 넣는 방식으로 정리하면 관리하기 편했습니다.
폰트 주소를 넣은 뒤에는 font-family 부분을 수정해야 실제 블로그 글꼴이 바뀝니다. Nanum Gothic을 가장 앞에 넣으면 해당 글꼴이 우선 적용되고, 불러오지 못할 경우 뒤에 있는 Arial, 돋움, Dotum 같은 글꼴이 순서대로 적용됩니다.
수정 후 달라진 부분
티스토리 Fastboot 글꼴 수정 후 가장 먼저 느껴진 변화는 본문이 덜 답답해 보인다는 점이었습니다. 글꼴만 바꿨을 때보다 line-height를 함께 조정했을 때 가독성 차이가 더 크게 느껴졌습니다.
특히 긴 문단이 많은 글에서는 줄 간격이 좁으면 모바일 화면에서 글이 뭉쳐 보입니다. CSS에서 line-height를 조정한 뒤에는 같은 글이라도 읽는 흐름이 부드러워졌고, 본문 영역이 훨씬 정돈된 느낌으로 바뀌었습니다.
FAQ
티스토리 Fastboot 글꼴 수정은 HTML에서 하나요?
글꼴과 문단 간격은 대부분 CSS에서 수정합니다. HTML보다 CSS 탭을 먼저 확인하는 것이 좋습니다.
line-height는 몇으로 두는 것이 좋나요?
본문 위주의 블로그라면 1.8 정도가 무난합니다. 더 넓은 간격을 원하면 2.0까지 테스트해 볼 수 있습니다.
다른 스킨도 같은 방식으로 바꿀 수 있나요?
기본 원리는 비슷하지만 CSS 구조가 다를 수 있습니다. Fastboot가 아니라면 font-family 위치가 다르게 보일 수 있습니다.
