티스토리 블로그 기본 웹폰트(Web Font) 변경하는 방법

구글에서 제공하는 폰트를 이용해서 티스토리 블로그의 기본폰트를 변경하는 방법을 소개합니다.

 

검색해봤는데...따라하기가 힘들게 되어있어서 제가 직접 해 보고 기록을 남기기 위해 포스팅 등록합니다.

 

현재 사용하는 티스토리의 스킨테마에 따라서 적용이 안될 수 있음으로 반드시 변경 전에 스킨백업 후 진행하시기 바랍니다.

 

 

1. fonts.google.com/ 사이트로 이동해서 원하는 폰트를 선택합니다.

 

위 사이트로 이동하면 아래화면처럼 여러가지의 폰트를 확인할 수 있습니다.

미리보기가 가능하게 되어있음으로 변경하려고 하시는 폰트를 선택해 주시면 됩니다.

 

언어항목을 Korean으로 변경 해 주시면 한글을 지원하는 폰트만 확인할 수 있습니다.

 

 

현재 저의 블로그 기본폰트는 Note Sans KR 로 되어있습니다.

 

이 폰트를 Do Hyeon 폰트로 변경 해 보려고 합니다. 테스트로 변경하는 거라서 변화가 확실히 보이는 폰트를 선택 했습니다.

 

 

 

기본폰트의 스타일을 볼 수 있습니다.

 

 

1. Do Hyeon 폰트를 선택 한 후 우측에 나타나는 +Select this style 를 눌러 줍니다.

 

 

2. Selected family 창이 열리면서 Review가 나타납니다.

아래 쪽을 보시면 블로그에 적용해 줘야하는 코드가 생성됩니다. 

여기서 Link 항목을 먼저 선택한 후 그 내용(<link rel 부분 )을 복사 해 줍니다.

 

 

3. 이제 블로그관리자 페이지로 이동해서 위에서 복사한 코드를 넣어 줘야 합니다.

 

관리자페이지로 진입하기 위해서 블로그 설정 메뉴를 눌러서 들어갑니다.

제 블로그는 관리자 페이지로 들어갈 수 있는 메뉴가 스킨에서 제공됨으로 그걸 통해서 이동합니다.

 

 

4. 블로그관리 화면에서 좌측의 꾸미기-스킨편집 항목을 선택합니다.

 

 

5. 스킨편집 창이 열리면 우측 상단부에 보이는 html편집을 눌러서 html편집창을 열어줍니다.

 

 

6.이제 열린 html 편집창에서 복사한 코드를 붙여넣기 해 줄 부분을 찾아야 합니다.

이미 많은 내용과 스크립트 , 태그가 적용되어있기 때문에 복잡할 수 있음으로 가장 무난하게 </head> 항목을 찾은 후 그 위에 붙여 넣기 해 주시면, 다른 것을 건들지 않고 가장 원활하게 적용할 수 있습니다.

 

구글폰트 사이트의 Select Family 항목의 LINK 코드를 복사해서 블로그관리의 Html 편집창에 아래 그림과 같이 복사해서 정확한 위치-</head>위에 붙여넣기 해 줍니다.

 

 

7. 이제 블로그관리창의 CSS 탭을 선택한 다음 구글폰트사이트의 Selected family 창의 @import 항목을 선택한 후 아래에 보여지는 코드를 복사해서 CSS창의 *web font load * 항목 아래에 붙여넣기 해 줍니다.

 

구분하기 쉽도록 블로그관리 페이지는 좌측에, 구글폰트 페이지는 우측에 배열해 놓은 후 작업하면 편리합니다.

 

이미 이전에 적용된 @import 코드가 있을 경우에는 /* */ 로 묶어줘서 html이 무시될 수 있도록 조치 해 줍니다.

삭제해도 되지만 만약을 대비해서 무시태그 조치 해 주는 게 좋습니다.

 

그 다음 구글폰트 페이지의 CSS rules to specify families 항목에 있는 코드를 복사해서 좌측 CSS 창의 *Type Select Reset * 항목 아래에 있는 Body 태그항목 옆 부분에 {로 시작해서 붙여 넣기 해 줍니다.

코드 마지막에 아래 사진처럼 !important 태그로 마무리 해 주시면 1순위로 적용됩니다.

 

 

 

8. 이제 코드 붙여넣기가 완료되었으면 블로그관리 창의 상단에 있는 적용 버튼을 눌러서 블로그에 적용해 줍니다.

 

 

9. 블로그 창을 새로고침 해 보시면 아래와 같이 블로그 폰트가 변경 된 것을 확인 할 수 있습니다.

 구글폰트 사이트 미리보기에서 봤던 보습보다 블로그에 적용된 모습을 보니...좀 답답한 모습으고 가독성이 좋지 않아서 저는 다시 가독성 좋은 폰트로 변경 해 보려고 합니다.

 

 

10. 제 개인적인 생각으로 가장 가독성이 좋은 폰트는 Note Serif KR 인 거 같습니다.

그래서 이 폰트로 다시 변경 적용 했습니다.

 

구글폰트사이트에서 Note Serif KR 폰트를 선택 해 준 후 아래 미리보기를 참고하여 가장 보기 좋은 스타일을 선택 해 줍니다. Regular 400 스타일이 가장 눈에 보기 좋아 보여서 선택했습니다.

 

 

 

11. Select this style을 선택하고 Selected family 창에서 알려주는 Link 코드를 복사해서

 

 

 

12. 블로그관리창의 HTML 태그창을 열고 </head> 라인을 찾은 후 그 위에 붙여넣기 해 줍니다.

 

 

 

13. 그 다음 다시 SElected family 창의 @import 항목을 선택 후 아래 코드를 복사해서

블로그관리의 CSS 창을 열어서 *Web Font Load* 라인을 찾아서 그 아래 부분에 붙여 넣기 해 줍니다.

 

<이때! Style 태그는 넣어도 되고 안넣어도 되는 것으로 제 스킨에서는 확인되었습니다. 적용하시는 분들은 넣고 빼고 하면서 비교해 보시기 바랍니다>

이어서,

CSS rules to specify families 항목아래의 코드를 복사해서 다시 블로그관리의 CSS창을 열고 *Type Selector Reset* 라인을 찾아서 그 아래에 붙여넣기 해 줍니다.

이때, 코드 마지막에는 !important 로 마무리 해 줍니다. 철자에 주의 하고 오타가 나지 않도록 주의 합니다.

 

 

 

14. 블로그관리 페이지 우측상단의 적용을 눌러서 수정한 내용을 저장 해서 스킨편집을 마무리 하고

블로그를 새로 열어서 새로고침 해 주시면 아래와 같이 Note Serif KR 폰트로 정상적으로 변경 된 것을 확인 할 수 있습니다.

 

 

 

이제 똑같은 폰트로 밋밋할 수 있는 블로그에 새로운 옷을 입혀주는 폰트변경을 따라해 보실 수 있으실 겁니다.

 

감사합니다.