[티스토리] 글씨체/폰트 변경

 

본 게시글은 티스토리 블로그에서 제목/본문/카테고리 등의 폰트를 변경하는 방법에 대해 다룬다.

현재 티스토리 폰트는 매우 깔끔한 편이고 심플 이즈 베스트라지만, 가끔 휴대폰 폰트 바꾸는 것처럼 기분 전환이 가능하다.

---

1. 원하는 폰트 탐색

무료로 사용가능한 폰트를 찾는 사이트는 크게 두 개가 있다.

• 구글 폰트: 상업적 사용이 가능하나, 한국어 기준 예쁜 폰트는 적음.

Browse Fonts - Google Fonts

• 눈누: 폰트마다 상업적 사용이 가능한지 확인해야 함. (상업적 사용 가능한 폰트만 검색 가능) 예쁜 한국어 폰트가 많음.

눈누

---

2. 설정하기 (스킨에서 HTML 편집 > CSS 수정)

설정하고 싶은 폰트를 찾았다면 (상업적 이용 가능한지 필수적으로 확인!!),

먼저, 사용하고자 하는 폰트를 불러와야 한다. 이는 '누누' 사이트를 예시로 설명하겠다.

2.1 소스코드 복사

모든 폰트에서 검색하면, "웹사이트"에서 사용가능한 폰트만 따로 필터 설정 가능하다.

눈누 사이트에서 폰트 탐색

 

나는 KCC간판체 폰트를 골랐다. 이 때 옆에 보면 "웹폰트로 사용"에 있는 코드를 복사한다.

설정하고자 하는 폰트

 

@font-face {
    font-family: 'KCC-Ganpan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCC-Ganpan.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

 

2.2 블로그에서 폰트 로드

블로그 관리 >> 스킨편집 >> HTML 편집 >> CSS로 들어간다.

가장 위에 복사한 코드를 붙여 넣는다. 이렇게 하면 폰트가 로드되고 해당 코드는 'KCC-Ganpan'이라는 이름으로 사용 가능하다.

소스코드 붙여넣기

 

2.3 폰트 설정

마지막으로 폰트를 설정하고자 하는 항목의 태그를 변경해 주면 된다. 나의 경우는 h1 태그가 글의 제목, p 태그가 블로그의 제목이다. 만약 본문 내용을 변경하고자 한다면 body를 수정하면 된다.

블로그의 제목의 font-family를 'KCC-Ganpan'으로 설정하면 된다. font-family에 설정된 차례대로, 만약 'KCC-Ganpan' 폰트의 로드에 실패했다면, 다음 폰트가 자동으로 설정된다. 추가로 아래의 값을 설정 가능하다.

• font-weight: 폰트 두께
• font-size: 폰트 크기

티스토리 제목 폰트 바꾸기