티스토리 글씨체(글자폰트) 변경, 5분이면 끝

Tistory 글자폰트 내 마음대로 설정하여, 나만의 블로그를 완성하다

---

 

티스토리 블로그 운영시 어떤 스킨을 적용할지 고민될 때가 많습니다. 그만큼 종류가 다양하기 때문입니다. 현재 티스토리에서 무료로 재공하는 스킨만 45가지가 되며(#반응형, #1,2,3단형 등), 개인이 만들어 배포되는 유/무료 스킨까지 합치면 스킨 종류만해도 너무나도 많습니다. 

 

Tistory Skip 종류

 

결정장애를 극복하고 원하는 스킨을 선택했다고 하더라도, 각자 개인의 취향에 맞는 블로그로 꾸미기에는 아직도 많이 부족합니다. 원하는 곳에 원하는 사진으로 꾸민다던지, 메뉴바 설정 등등 설정하고 바꿔줘야 하는 것들이 너무나 많습니다. 

 

그 중 개인적으로 가장 중요하다고 생각되는 것은

'글자체' 입니다.

 

글을 읽는 사람들에게 익숙하고, 편하게 읽히는 글자체를 선택하는 문제는 블로그 글 작성에 꽤 중요한 부분이라고 생각이 됩니다.

그래서 오늘은 각각의 스킨에 사용되는 기본 글자체를 변경하는 방법에 대해서 알려드리고자 합니다.

 

---

글자체 변경하기

---

과정은 간단합니다. 

원하는 글자체 다운로드 > 티스토리 CSS에 적용 > 글자 반영 확인

 

1. 먼저 사용하고자 하는 글자체를 다운받아보도록 하겠습니다.

---

개인적으로 좋아하는 '나눔글꼴' 계열 글자 중에서 '나눔스퀘어라운드' 글자체가 지겹지 않고 편안한 느낌을 주는 것 같아서 이 글자체로 선택했습니다.

다운받는 경로는 여러가지가 있겠으나, 저는 아래 링크를 이용해서 글자체를 다운받겠습니다.

https://github.com/innks/NanumSquareRound

innks/NanumSquareRound

해당 링크에 가셔서 NanumSquareRoundR 관련 4가지 File을 다운받습니다.

NanumSquareRoundR File

 

 

---

나눔글꼴 관련한 상세 글꼴은 아래 링크를 참고하셔서 선택하시면 됩니다.

https://hangeul.naver.com/2017/nanum

[네이버 한글한글 아름답게 : 나눔글꼴]

 

해당 링크를 들어가시면, 

나눔글꼴 관련한 폰트 모음으로, 나눔스퀘어라운드/나눔스퀘어/나눔바른펜/나눔바른고딕/나눔명조에코/나눔손글씨붓체 /나눔고딕/나눔명조 등이 있으며 각각의 글씨체에 직접 글자를 입력하여 확인 가능합니다.

나눔스퀘어라운드 글자체

 

 

2. '나눔스퀘어라운드'를 티스토리로 불러오기

---

티스토리 스킨편집 > HTML편집으로 이동한 후 '파일업로드'를 선택, 다운받아 놓은 4가지 파일을 업로드합니다.

HTML편집내 파일업로드

 

그런 후에 'CSS' Tab으로 이동하여, 맨상단에 아래와 같이 Code를 입력해줍니다.

@font-face {  font-family: 'NanumSquareRoundR';  src: url(images/NanumSquareRoundR.eot);  src: url(images/NanumSquareRoundR?#iefix) format('embedded-opentype'),       url(images/NanumSquareRoundR.woff2) format('woff2'),       url(images/NanumSquareRoundR.woff) format('woff'),       url(images/NanumSquareRoundR.ttf) format('truetype'); }

Code 위치는 @charset "utf-8"; 아래입니다.

 

그 다음 'CSS' Tab내에 font-family를 검색하여 기존 글자체 설정 대신 'NanumSquareRoundR'로 변경해줍니다.

---

 

 

---

 

 

이제 HTML편집 화면에서 '적용', '새로고침'을 해줍니다.

 

3. 티스토리 블로그 글자체 변경 전후를 확인해보겠습니다.

---

기본 글자체 나눔명조에서 나눔스퀘어라운드로 변경된 것을 확인할 수 있습니다.

01

나눔명조, 나눔스퀘어라운드 글자체 비교

 

어떤 글자체가 눈에 편하고 읽고 싶어지나요?

 

각각의 취향에 맞는 글자체로 변경하고, 각각의 스타일에 맞는 블로그를 꾸며 나가면서, 나만의 공간을 완성해 나가는 일에서 많은 매력이 느껴집니다. 

 

 

---

오늘은 티스토리 글자체 변경에 대해서 간단하게 알아봤습니다. 

 

다음 글에는 글자 크기, 색, 글자간격 등을 조절하는 방법에 대해서 알아보려고 합니다.