티스토리 글꼴 바꾸기

 

티스토리를 시작하면서 시간이 날때나 심심해서 할게 없을 때 조금씩 블로그를 꾸미려고한다.

제일 처음에 한게 글꼴 바꾸기인데 티스토리의 글꼴은 어떻게 바꾸면 되는지 한번 알아보자.

 

글꼴 파일 or 글꼴 링크를 구하자

 

가장 먼저 본인이 사용하고 싶은 글꼴을 찾아야한다.

'글꼴의 저작권은 꼭 확인하고 사용하자!'

글꼴을 적용하는 방법은 크게 두가지이다.

 

1. 글꼴 파일(ttf, otf)파일 구하기

 

구글이나 네이버 등 웹서핑을 통해서 본인이 원하는 글꼴 파일을 ttf 또는 otf의 파일로 구하면된다.

윈도우에서 설치 후

"제어판 > 모양 및 개인 설정 > 글꼴"

에서 설치 된 글꼴을 확인할 수 있다.

 

2. 웹 폰트 구하기

 

대표적인 웹 폰트로 구글 웹폰트가 있는데 웹 폰트의 경우 폰트의 경로를 알아야한다.

구글 웹 폰트는 아래와 같이 경로를 확인할 수 있다.

 

1. 원하는 글꼴을 선택한다.

2. 위 사진의 1번 위치의 'SELECT THIS FONT'를 클릭한다.

3. 추가된 글꼴의 정보를 확인하여 2번의 내용을 복사해둔다.

 

글꼴을 적용해보자

0. 적용하기 위한 사이트로 접속하기

 

1. 자신의 관리 페이지로 이동

2. 스킨 편집으로 이동

스킨 편집으로 이동

3. html 편집으로 이동

 

1.1 글꼴 파일로 적용하기

 

우선 다운받은 ttf 또는 otf파일을 아래와 같이 파일업로드에 올려준다.

이후 CSS로 들어가서 @font-face를 정의해준 다음, 아래 body, button, ... {...}와 같이 작성되어 있는 부분에서 font-family에 해당 글꼴 이름을 작성하면 된다.

 

1.2 웹 폰트 링크로 적용하기

 

위에서 저장한 링크를 아래와 같이 붙여넣는다.

 

이후에 아래와 같이 css에서 폰트를 추가해준다.

추가해주는 내용은 위의 링크에서 <link herf="~~/~~/css?family=폰트이름&display=swap ~~>로 되어 있는데 폰트이름을 추가하면 된다.

위 사진에서는 Anton이므로 Anton으로 추가해주면 된다.

 

font-family의 가장 앞부분에 작성해야 앞에서 적용된다.

설정을 다 했으면 적용 버튼을 눌러주면 된다.

 

마무리하며 다음에는?

위의 방법은 TISTORY블로그 전체 글꼴이 바뀐다. 다음에는 원하는 부분만 따로 글꼴을 변경할 수 있는 방법도 포스팅하고 링크를 첨부하겠다.

만약, 궁금하다면 혹은 웹에 관심이 있다면 웹개발용 언어인 html, css를 공부해보면 도움이 많이 될 것 이다.