[티스토리] 티스토리 글쓰기에 폰트 추가/적용 하는 방법 / Google Fonts에서 폰트를 가져와 적용하는 방법

 

 

 

 

블로그 글을 쓰는데 항상 같은 글꼴에 굵기, 색상만 변경하다 보니 뭔가 심심한 거 같아 폰트 추가하는 김에 정리해본다.

 

 

티스토리 글쓰기 폰트 추가하는 방법?

 

티스토리에서 제공하는 기본 폰트

 

처음에 나는 저기서 폰트를 추가해서 글 쓸 때, 폰트를 선택해서 하는 줄 알고 하루종일 찾아보았는데

 

결론은 티스토리 글쓰기에 폰트를 추가 할 수 없다는 사실을 알았다.

 

 

 

티스토리 폰트 변경

 

결국 워드나 한컴처럼 글을 작성할 때, 새로운 폰트를 추가/변경 하는 게 아니라 글을 작성한 후에

티스토리 블로그 자체에서 글꼴을 변경해야 하는데, 아래와 같이 하면 된다.

 

 

1. 원하는 폰트 찾기

 

Google Fonts에 접속하여 원하는 폰트를 고르도록 하자.

 

 

Language에서 언어를 Korean으로 변경하면 조금 추릴 수 있다.

 

여기서 자신이 원하는 녀석을 아무거나 클릭하도록 하자.

 

 

그럼 위와 같은 화면이 나오는데 여기서 우측 상단에 있는 [View Selected Families] 버튼을 눌러주도록 하자.

 

 

 

그럼 이렇게 Selected families창이 활성화 된다.

여기서 @import를 눌러주도록 하면 아래 소스가 변경된다.

이 친구들을 복사해서 갖다 넣으면 된다.

 

 

 

2. 폰트 소스 갖다 붙이기

 

 

관리자페이지에서 꾸미기 > 스킨편집을 눌러준다.

 

 

html편집 버튼을 눌러준다.

 

 

 

그럼 이런 창이 뜬다. 기본적으로 HTML탭이 선택되어 있는데

여기에 위에서 찾은 <style> 코드를 조금 손 본 다음 갖다 붙여야 한다.

 

 

 

빨간박스로 친 부분을 가져다 복사해주도록 하자

그리고 메모장에 붙여넣어서 아래와 같은 형식으로 작성해주면 된다.

 

 

 

샘플코드

<style>
    @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Jua&display=swap');
    .test-font { font-family: 'Black Han Sans', sans-serif };
</style>

 

비개잘자라면 조금 어려울 수도 있는데, 만약 어렵다고 느껴진다면

위의 샘플코드를 복사하고, 다음 내용만 자신이 고른 폰트에 맞게 수정해주도록 하자.

 

 

<style>
    @import url( 첫번째 박스 : 자신이 선택한 폰트의 url);
    .test-font { 두번째 박스 : 자신이 선택한 폰트의 CSS rules to specify families };
</style>

 

여기서 3번째 줄의 .test-font는 내가 임의로 설정한 것이므로 원하는 걸로 아무거나 사용해도 된다.

단 나중에 쓸 것이므로 기억해야 된다.

 

그럼 이렇게 작성된 코드를 복사해서 HTML탭에 붙여놓도록 하자.

위치는 따로 상관 없다.. 개발자라면 알아서 잘 넣겠지..

 

 

 

나는 저기다 붙여 넣어줬다. 이제 준비는 끝났다. 실제로 적용을 해보도록 하자.

 

 

 

 

3. 폰트를 적용하자.

 

 

자신이 작성중인 글에서 우측상단에 있는 기본모드를 HTML로 변경하자. 그럼 아래와 같은 화면이 나오는데

 

 

 

가장 첫줄과 마지막 줄에 빨간박스에 친 것과 같이 작성해주면 된다.

 

 

첫째줄 : <div class="자신이 정한 폰트명">
마지막줄 : </div>

샘플
첫째줄 : <div class="test-font">
마지막줄 : </div>

 

이 경우에는 내가 쓴 글의 모든 부분을 해당 폰트로 바꾸는 것이고, 특정 부분만 바꾸고 싶다고 하면

<p> 태그안에 class="자신이 정한 폰트명"을 입력해주면 개별로 폰트를 적용할 수 있다.

 

이렇게 하고 미리보기를 누르면 폰트가 변경된 것을 확인할 수 있다.

 

 

 

폰트 변경 완료

 

이번에 이거 하면서 느낀건데, 솔직히 귀찮다.. 그냥 기본 폰트외에 자신이 추가할 수 있도록 해주었으면 좋았을텐데..

어쨌든 앞으로는 이렇게 폰트를 조금 바꿔볼까 생각중이다.