[티스토리] 아주 쉽게 Tistory 폰트 변경, 글씨체 변경하는 법 / "웹폰트로 사용" 쓰는법

[티스토리] 아주 쉽게 Tistory 폰트 변경, 글씨체 변경법  / "웹폰트로 사용" 쓰는법

 

안녕하세요 꿀개입니다.

 

오늘은 티스토리 웹페이지의 폰트를 변경하는 방법을 알아보겠습니다.

 

CSS에 대한 지식이 없어도 매우매우 쉽게 가능합니다!!

 

1. 폰트 사이트에서 원하는 폰트 고르기

저는 주로 아래 눈누 페이지를 사용합니다.

https://noonnu.cc/

눈누

 

페이지에서 원하는 폰트를 하나 골라봅시다. 

 

사용할 폰트. 라이선스 요약표를 꼭 봐야합니다.

 

저는 이 폰트를 골랐는데요 여기서 주의할점!!!

아래 라이선스 요약표를 보고 사용하실 용도와 라이선스 맞는지 꼭 확인하셔야합니다.

요즘같이 저작권이 중요한 시대에 라이선스를 위반하면 큰일나는거 아시죠?ㅎㅎ

 

폰트를 고르셨으면 오른쪽 상단의 "웹폰트로 사용" 부분 텍스트를 복사합니다.

 

2. CSS 편집

 

그 다음, [블로그 관리 > 스킨 편집] 들어가셔서 오른쪽 상단의 html 편집 버튼을 누릅니다.

 

블로그 관리 > 스킨 편집 > html 편집

 

그럼 오른쪽 영역에 HTML/CSS 코드가 보여집니다. 여기서 우리는 CSS를 클릭합니다.

여기서 HTML과 CSS의 차이에 대해 간단히 설명드리자면,

HTML은 기능을 구현한다면 CSS 는 보여지는 부분을 담당한다고 보시면 되겠습니다.

 

HTML > CSS 클릭

 

복잡한 코드가 많지만, 알고 나면 전혀 어렵지 않습니다!!

 

3. 복사한 폰트 붙여넣기

 

아까 1번에서 복사한 웹폰트를 붙여넣겠습니다. 저는 26번째 라인에 붙여넣었습니다. 라인 숫자는 별로 중요하지 않고, 전역 공간에서 폰트를 사용하시기 전에 선언만 해주시면 됩니다.

 

웹폰트 붙여넣기

 

4. font-family 수정하기

 

이제 마지막입니다. "body" 태그를 찾아서 font-family 속성의 두 번째 원소를

아까 복사한 폰트의 이름으로 바꿉니다.

 

아까 복사한 폰트의 이름은 font-face 태그 내의 font-family 속성 값입니다.

저의 경우는 'SOYOMapleBoldTTF' 네요.

 

font-family 바꾸기

 

끝입니다!! 이제 오른쪽 상단 [적용] 버튼 누르시고 웹페이지 새로고침 하시면 폰트가 바뀐게 보이실겁니다!

 

번외. H1 바꾸기

 

저는 블로그 제목은 다른 폰트를 적용했습니다.

방식은 모두 동일하며, 딱 하나! [body] 태그가 아니라 [header h1] 태그의 font-family를 변경하시면 됩니다.

 

header h1 font-family 변경

 

최종 결과

 

블로그 제목과 본문의 폰트가 잘 적용된 것을 볼 수 있습니다.

 

최종 결과

 

혹시 더 궁금한 부분이 있다면, 댓글 부탁드립니다.