안녕하세요, 이번 포스팅은 티스토리 블로그 세부 항목 폰트 변경방법 대해서 설명 드리도록 하겠습니다. 기존에 사용한 웹폰트로 사용 코드를 이용해서 폰트를 변경하는 방법인 점을 먼저 말씀 드리도록 하겠습니다.
티스토리 블로그 폰트 – 전체 적용
: 티스토리 블로그 폰트는 개별적으로 적용할 수 있고, 전체적으로 적용할 수 있습니다. 지난 포스팅에 기재한 내용은 전체적으로 적용할 폰트를 적용하였습니다.
전체적으로 적용을 하려면 “/* Type Selector Reset */”이라고 적혀 있는 부분에 원하는 폰트를 적용을 시켜주시면 됩니다. 폰트 적용 방법은 티스토리 블로그 전체 폰트 변경 방법 포스팅을 참조 하시면 됩니다.
함께 보면 도움이 되는 글
▶ 티스토리 블로그 전체 폰트 변경 방법
▶ 티스토리 블로그 폰트 크기 변경 방법 (feat. CSS 편집)
▶ 티스토리 블로그 만들기 가입 방법
▶ 티스티로 글자 수 쉽게 세는 방법 (크롬 확장 프로그램)
▶ 티스토리 블로그 글쓰기 방법
티스토리 블로그 세부 항목 폰트 변경방법
: 위에서 설명 드린 전체 적용이 아닌 개별적으로 티스토리 제목 폰트를 변경을 하려고 하거나 티스토리 카테고리 폰트를 수정 및 메인 메뉴의 글자를 변경하고 싶을 경우에는 각 항목에 일일이 폰트를 적용을 해주셔야 합니다.
지난 포스팅에서 설명 드린 대로 눈 누에서 원하는 폰트의 웹폰트로 사용 코드를 복사하여서 /* Web Font Load */ 부분에 적용을 시켜주셔야 합니다. 즉 해당 부분은 외부 폰트를 불러오는 폴더라고 생각해주시면 될 거 같습니다.
그럼 한 예로 아래 폰트를 이용해서 적용하는 방법을 설명 드리도록 하겠습니다. “Pretendard-Regular”은 전체 적용할 때도 사용한 것입니다. 혼선을 피하기 위해서 하나의 폰트로 글을 작성하고 있는 점 참조 부탁 드립니다.
#출처 눈누 사이트
@font-face {
font-family: ‘Pretendard-Regular’;
src: url(‘https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff’) format(‘woff’);
font-weight: 400;
font-style: normal;
1) 상단 로고 폰트 변경
: 티스토리 상단에 있는 로고의 폰트를 변경을 하고 싶은 경우에는 아래 경로에서 font-family에 위에 기재한 폰트를 추가해주시면 됩니다.
#header h1 {
font-family: ‘Pretendard-Regular’
}
2) 리스트 타이틀 폰트 변경
: 리스트로 나열하는 설정을 할 경우에는 아래 경로에서 font-family에 추가를 해주시면 됩니다. 해당 부분은 스킨 편집 메뉴에서 리스트로 변환을 할 수 있으니 리스트로 변환을 하고 적용하시는 걸 추천 드립니다.
.list-type-thumbnail .post-item .title {
font-family: ‘Pretendard-Regular’
}
3) 카테고리 폰트 변경
: 북 클럭의 경우에는 우측 사이드바에 카테고리가 위치하게 됩니다. 해당 위치에 있는 티스토리 카테고리의 폰트를 변경을 해주시려면 “. sidebar”를 CSS 코드에서 검색한 후 font를 적용을 해주시면 됩니다.
#카테고리 메인 타이틀 글
.sidebar .category .link_tit {font-family: ‘Pretendard-Regular’;}
#카테고리 메인 밑에 부수 아이템
.sidebar .category .link_item {font-family: ‘Pretendard-Regular’;}
이외에는 딱히 추가적으로 크게 필요 없는 사항이라 기존에 있는 폰트로 이용해도 괜찮다고 판단이 됩니다. 만약 다른 글자에 대해서 폰트를 적용을 하시려면, CSS 코드에서 해당 항목의 영어 철자를 이용해서 검색을 해서 “font-family”을 변경해서, 적용을 해주시면서 원하시던 수정이었는지를 확인해서 수정 해나 가시는 걸 추천 드립니다.
참고로 위에서 설명 드린 수정 사항은 꼭 CSS 코드를 미리 복사 해서 백업을 해놓고 수행하시는 걸 추천 드립니다. 전문가이신 분들은 오류가 났으면 자신이 수정을 할 수 있지만 초보자의 경우에는 어디가 잘 못됐는지 확인하기가 힘들기 때문입니다.
그럼 여기까지 작성하도록 하겠습니다. 지금까지 티스토리 블로그 폰트 변경하는 방법 중에 세부적인 글자 폰트를 변경하는 티스토리 블로그 세부 항목 폰트 변경방법 대해서 포스팅을 작성하였습니다. 참고로 위에서 설명 드린 사항은 블클럽 스킨 기준입니다. 그럼 도움이 되었으면 합니다. 감사합니다.
