티스토리 폰트 추가 방법

티스토리에 폰트(글씨체) 추가하는 방법, 스킨마다 기본 적용되어 있는 글씨체가 다른데 원하는 글꼴로 바꾸는 방법을 알아봅니다.

1. 다운로드한 글꼴 적용하기
2. 바뀐 글꼴 확인

 

 

1. 글꼴 다운로드하여 적용하는 방법

※ <네이버 한글한글 아름답게>에서 다운로드한 '마루부리 글꼴'을 티스토리 북클럽(Book Club) 스킨에 적용한 예시입니다.

 

1) 다운로드한 파일의 압축을 풀면 OTF, TTF 파일이 있는데, ▼

(그림 1) 다운로드 파일 열기

 

OTF, TTF 각각의 폴더에 있는 글꼴 중 원하는 굵기를 선택합니다. ▼

(그림 2) 글꼴 굵기 선택

 

2) 티스토리 관리 → 스킨 편집 → html 편집으로 이동. ▼

(그림 3) 티스토리 HTML 편집 화면

 

3) ①파일 업로드 선택 → ②추가 버튼 클릭 → 다운로드한 글꼴 OTF, TTF 파일을 업로드한 후 ③적용을 누릅니다. ▼

(그림 4) 다운로드한 글꼴 파일 업로드

 

4) CSS로 이동해서 /* Web Font Load */에 다음의 @font-face 소스 코드를 입력 후 적용을 누릅니다. ▼

※ 아래 코드는 'MaruBuri-Regular' 기준.

@font-face 코드.txt

0.00MB

@font-face {
font-family: 'MaruBuri-Regular';
src: url('./images/MaruBuri-Regular.otf');
src: url('./images/MaruBuri-Regular.ttf');
}

 

(그림 5) @font-face 코드 입력

 

5) /* Type Selector Reset */의 body 부분 font-family에 글꼴명을 입력 후, 적용을 누릅니다. ▼

(그림 6) body의 font-family에 글꼴 입력

 

6) 아래 (그림 7)의 /* Layout Selector */ #header h1은 '블로그 제목' 글꼴입니다. 위처럼 글꼴명을 입력 후 적용을 누릅니다. ▼

(그림 7) header h1의 font-family에 글꼴 입력

 

 

2. 바뀐 글꼴 확인하기

북클럽 스킨에 기본 적용되어 있던 글꼴이, '마루 부리' 글꼴로 바뀐 것을 확인할 수 있습니다. ▼

※ 글 작성 시에는 변경한 글꼴이 표시되지 않으며, 미리 보기 또는 글 발행 후 화면에서만 바뀐 글꼴을 확인할 수 있습니다.

(그림 8) 글꼴 변경 예시 화면

 

 

노트북 사진

위 노트북 사진 속 logo 출처는 tistory입니다.