티스토리 기본서체 본명조체 변경 (feat. 기본글씨 본고딕, 궁서체 변경 방법)

티스토리 블로그의 기본 글씨체를 다른 글씨체로 바꾸어보겠습니다.

 

 

티스토리 작성 시 "기본서체"가 적용되고, 글 작성 시마다 매번 기본글씨를 본고딕, 궁서, 본명조 체로 변경하면서 글을 작성하던 중, 티스토리 HTML, CSS 적용을 통해서 기본서체를 바꿀 수 없을까 하는 의문이 들었습니다.

 

 

티스토리 스킨편집으로 시작합니다.

① 티스토리 관리 > 꾸미기 > 스킨편집 > Html 편집 > CSS 선택 

② Ctrl+F 찾기로 font-family 검색 

③ header h1, header p, body 영역 폰트 변경하기. 

 

블로그 타이틀 폰트 변경 

 

 

font-family로 검색하면 #header h1 영역에 font-family 영역을 확인할 수 있습니다. 저는 기본폰트를 나눔명조에서 본명조 폰트로 변경해보겠습니다. 본명조 폰트 : Noto Serif KR.

폰트가 적용된 화면입니다. 블로그의 최상단 폰트가 본명조 폰트로 변경되었습니다. 하지만 글의 제목 폰트는 변경되지 않았네요. 서치어드바이저와 구글 서치콘솔의 최적화 이슈로 글의 제목부분 태그를 header p로 변경하였더니, 일부는 적용되지 않는 이슈가 있습니다. 이부분은 header p 영역을 찾아서 똑같이 본명조 글씨체로 변경해줍니다. 

 

글의 제목 폰트 변경

 

글의 제목과 본문의 폰트를 변경해줍니다. 

CSS영역에서 font-family로 검색된 결과 중 body{}에 해당하는 영역이 작성 글의 제목과 본문의 지정폰트 영역입니다. 왼쪽 이미지가 변경 전, 오른쪽 이미지가 변경 후 이며, 변경 전 폰트는 AppleSDGothicNeo, Noto Sans KR 폰트이고 변경후 폰트는 본명조체인 Noto Serif KR 로 변경하였습니다.  

 

폰트 변경 전 (고딕체)

검증을 위해 F12 개발자 도구를 클릭하여 기존 폰트와 변경후 폰트를 비교해보겠습니다.

변경 전에는 AppleSDGothicNeo 폰트가 적용되어 있는 것을 보실 수 있습니다. 

 

폰트 변경후 (본명조체)

변경된 CSS 적용 후에는 body font-family 영역에 Noto Serif KR 이 적용된 것을 확인할 수 있습니다.

 

header p 폰트 변경 

 

마지막으로 나눔 명조로 설정되어 있는  header p 폰트도 사용할 경우를 대비하여 폰트를 본명조로 변경하도록 하겠습니다.

 

 

기존에 작성한 글 글씨체 일괄 변경

티스토리 작성 글의 폰트 변경이 간단한 절차를 통해 완료되었으며, CSS를 변경하여 적용한 것이기 때문에 별도의 작업 없이도 기존에 작성하였던 글 모두에 새로 지정한 폰트가 적용된 것을 확인할 수 있습니다.