초보도 쉽게 따라하는 블로그 본문 글씨체 추가와 폰트 사용법

 

티스토리 블로그를 운영하면서 조금이라도 색다르게 꾸며보기 위한 첫걸음 중 한 가지로 글꼴을 추가하는 것 입니다. HTML 코딩을 수정해야 하는 다소 어려운 부분이 있긴 하지만 조금만 관심을 가지면 누구나 쉽게 글꼴을 수정할 수 있으니 아래 글을 참고해 주시기 바랍니다.

 

티스토리 블로그의 글을 작성하실 때 폰트, 즉 글꼴의 종류가 많지 않아 아쉬움이 많습니다.

저 또한 블로그를 운영한 지 얼마 되지 않아 기본 글꼴을 활용하여 글을 작성하였는데 간단하게 html을 수정하여 폰트를 추가할 수 있는 방법이 있어 소개를 하도록 하겠습니다.

물론 기존 html을 잘 다루시는 분들에게는 어려운 일이 아니시겠지만 저와 같은 생초보분들은 html이라는 것에 대한 막연한 두려움과 혹시 잘 못될까 걱정이 앞서 선 듯 손대지 못하는 것이 현실입니다.

 

티스토리 글쓰기 기본 글꼴 <사진 = 티스토리>

 

 

“html을 잘못 건드려서 스킨을 여러 번 덮어 씌우기를 했습니다. ㅠㅠ ”

아래 링크를 통해들어가시면 무료로 사용하실 수 있는 구글 폰트를 확인 및 다운로드를 진행하실 수 있습니다.

 

 

Google Fonts

아무래도 해외 기업이다 보니 한글 글꼴보다는 영문 글꼴이 다수이기는 하지만 23개의 한글 글꼴이 있어 마음에 드는 글꼴을 고르실 수 있습니다.

▼ 구글 폰트 홈페이지에 들어가시면 아래와 같이 글꼴을 선택할 수 있게 여러 가지의 글꼴을 확인하실 수 있습니다.

한글 글꼴은 언어 선택 메뉴에서 한글로 선택하시면, 한글 글꼴만 표기되므로 사용하고자 하는 글꼴을 선택하시면 됩니다.

 

구글 폰트 종류와 한글 선택

▼ 마음에 드는 글꼴을 선택하시면 아래와 같이 글꼴에 대한 내용을 확인하실 수 있습니다.

Styles 창에 글씨를 작성하여 글꼴이 잘 반영됐는지 확인하신 후 우측면의 + Select this style 버튼을 클릭하시기 바랍니다.

 

구글 폰트 선택 그리고 다운로드

▼ 이후 우측면으로 아래와 같이 창이 활성화되는데 Use on the web에서 @import를 선택해 주시기 바랍니다. 그리고 글꼴을 선택한 브라우저를 닫지 마시고 추가로 브라우저를 열어 티스토리 블로그 관리 페이지로 들어갑니다.

좌측면의 꾸미기 탭에서 스킨 편집을 클릭하여 블로그의 html을 수정할 수 있는 페이지로 넘어갑니다.

 

▼ 아래와 같이 창이 활성화되면 우측 상단면에 html 편집 버튼을 클릭합니다.

 

티스토리 블로그 스킨 html 수정

▼ html 편집을 클릭하시면 좌측면에 html을 수정할 수 있는 코드 창이 활성화되며 상당부의 CSS 탭을 클릭하시기 바랍니다.

 

 

구글 폰트에서 선택한 글꼴의 @import의 스타일 주소를 아래와 같이 복사 / 붙여넣기를 하여 글꼴을 읽어올 주소를 입력합니다. 그리고 스크롤을 내려 body 태그의 font-family:를 찾아 아래와 같이 글꼴의 이름을 복사 / 붙여넣기를 하시고 좌측 상단부의 적용 버튼을 눌러 저장하시고 창을 닫아주시면 됩니다.

 

티스토리 블로그 css 글꼴 추가

이렇게 글꼴을 추가하는 작업을 완료하였습니다.
글꼴을 꼭 한 가지만 추가할 수 있는 것은 아니니 구글 폰트 페이지에서 여러 글꼴을 선택하여 위와 같은 작업으로 추가해 주시면 됩니다.

 

이후 블로그의 글쓰기를 하실 때 추가된 폰트를 적용하시려면 글쓰기 모드를 html로 변경하시고 아래와 같이 태그에서 글꼴 부분을 변경해 주시면 됩니다.

 

글꼴 태그 = "font-family: '글꼴명';"

 

<span style="font-family: 'Nanum Pen Script', cusive; color: #9d9d9d; font-size: 30px;">html을 잘못 건들여서 스킨을 여러번 덮어 씌우기를 했습니다. ㅠㅠ</span>

위 html 태그를 입력하시고 글쓰기 기본모드로 돌아가시면 아래와 같이 표기가 되는데 선택한 글꼴이 반영되지 않는 것처럼 보입니다.

 

하지만 미리보기를 클릭하여 보시면, 글꼴이 반영된 상태를 확인하실 수 있습니다.

 

글쓰기에서는 기본 폰트 외 추가 폰트는 반영이 되지 않는다.

 

---

 

하지만 미리보기에서 글꼴 반영된 모습