티스토리는 네이버 블로그에 비하면 텍스트 에디터가 상당히 단조로운 편이어서, 글꼴 변경이나 글짜 크기 조절을 자유롭게 하기가 어렵고 예쁘게 꾸민 포스트를 올리기엔 한계가 있다.
오늘은 티스토리에서 글꼴 변경을 하려다 멘붕을 겪은 친구를 위해 글꼴 변경 방법을 포스팅할거다. :) 그런고로 이 포스팅은 스킨 "오디세이"를 기준으로 작성되었음을 알려드립니다.
-
폰트 선택
-
구글 폰트에서 원하는 폰트 검색 및 선택
원하는 폰트를 선택해야 하는데, 무료 웹폰트(비상업, 상업 모두 허용하는)를 사용하는 편이 후에 소송걸릴 염려가 없다. 구글이나 눈누에서 찾아볼 수 있는데, 오늘은 구글폰트를 이용해보자.
카테고리 별, 언어 별 등으로 원하는 폰트를 검색할 수 있는데, Language를 한글로 검색하면 무료 한글 폰트들만 조회할 수 있다.
fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
영어랑 다 봐봤자 눈만 아픔 -
폰트 목록들 중에서 원하는 녀석을 찾아서 클릭해, 상세페이지로 이동
상세페이지 화면에서는 Styles 안에 굵기 별로 폰트가 어떻게 보여지는지 표시되는데, 각 굵기마다 우측에 [+Select this style]이라는 버튼을 누르면 화면 우측에 내가 사용할 수 있도록 폰트링크와 css가 표시된다.
이 때 내가 특정 굵기만 사용하길 원하면 하나만 선택해도 되지만, 여러 굵기를 모두 사용하고 싶으면 원하는 굵기의 [+Select this style] 버튼을 모두 눌러주어야 한다.
이제 폰트를 추가할 준비는 완료되었다. 이 페이지를 잠시 두고 블로그 관리 화면을 새 창으로 띄워서 이 폰트를 적용해보자.
폰트 선택 > 상세페이지 이동
-
-
728x90
폰트 적용
-
HTML, CSS 변경 화면 열기
내 블로그의 관리 화면 내에서 왼쪽 메뉴 중 [스킨 편집]버튼으로 스킨 편집 화면으로 이동한 뒤 [HTML 편집] 버튼을 누르면 위 사진 중 마지막 장면처럼 HTML 소스를 확인할 수 있는 화면으로 이동된다.
블로그 스킨 HTML, CSS 변경 화면 -
HTML에 웹폰트 링크 적용
구글 웹폰트 화면에서 아래 이미지에 선택한 link태그를 복사해 블로그 HTLM의 <head>태그 안에 삽입한다.
<head> 태그 내의 어디든 위치는 상관 없지만 잘 찾아보면 Noto Sans KR 웹폰트가 기본적으로 삽입된 곳이 있다. 그 근처에 함께 넣어주는게 후에 관리하기 편하다. 삽입 후 잊지말고 상단의 [적용] 버튼을 눌러 저장한다.
웹폰트 링크 삽입 -
CSS에 웹폰트 적용
이제 HTML에 삽입한 웹폰트를 어느 위치(제목, 본문 또는 블로그 내의 모든 글자)에 적용시킬지 선택하면 된다.
우선 구글 웹폰트 화면에서 웹폰트 적용을 위한 CSS를 복사해둔다.
구글 웹폰트 CSS 복사 -
포스트 화면 내 제목 영역
.article-header .title-article 항목 내에 위에서 복사한 스타일을 적용시킨다.
포스트 제목 글꼴 적용 -
포스트 화면 내 본문 영역
.article-view p 항목 내에 위에서 복사한 스타일을 적용시킨다.
포스트 내용 글꼴 적용 -
포스트 화면 내 본문1, 2, 3 영역
해당 내용에 대한 스타일은 따로 직접 적어넣어야 한다. 아래 소스내용을 복사해서 아무데나 붙여넣기 한 후 저장한다. 만약 위의 2번 항목(포스트 화면 내 본문 영역)을 적용했다면 이 내용은 중복되는 내용이므로 굳이 또 적용할 필요 없다.
#tt-body-page p[data-ke-size='size18'], p[data-ke-size='size18'] { font-family: 'Sunflower', sans-serif !important; } #tt-body-page p[data-ke-size='size16'], p[data-ke-size='size16'] { font-family: 'Sunflower', sans-serif !important; } #tt-body-page p[data-ke-size='size14'], p[data-ke-size='size14'] { font-family: 'Sunflower', sans-serif !important; }
-
-
폰트 변경을 완료한 후 적용 후 화면은 아래 이미지와 같다.
제목과 본문의 폰트가 변경되었으나 그 외의 요소들은 폰트가 기본 폰트로 남아있다. 그리고 포스트 화면 내에서의 폰트만 변경한 것이기 때문에 글 목록 화면에서는 적용되지 않는다.
포스트 꾸미기 기능이 제공되지 않는 단순한 점이 티스토리의 매력이라고 생각했는데, 생각보다 글꼴이나 폰트 크기 같은걸 변경을 원하는 사람들이 있는 모양이다. 덕분에 여기저기 들쑤셔보고 재미있었다 :9
혹시 더 궁금한 내용 있으시면 댓글로 알려주세요~
'정보 > 블로그 운영' 카테고리의 다른 글
| [에드센스 승인 거절] 이노무쓱기들 (4) | 2021.02.10 |
|---|---|
| [티스토리 오디세이 스킨] 달력 커스텀 꾸미기, 일요일 빨간색/토요일 파란색 (15) | 2021.02.08 |
| 오늘도 에드핏 수익 0원 기록 (16) | 2021.02.04 |
| 에드핏 수익 0원 기록, 이유나 좀 알자 (15) | 2021.02.03 |
| 카카오 에드핏 심사 결과 (16) | 2021.01.25 |
댓글