티스토리 블로그 폰트 바꾸는 방법은?!

티스토리 블로그 폰트를 바꾸는 방법을 알아보겠다. 폰트를 웹(티스토리 블로그)에서 사용하려면 폰트 파일이 웹폰트(확장자 eot) 스타일이어야 한다. 혹시 가지고 있는 폰트 파일의 확장자가 ttf나 otf라면 다음 글을 참조하여 웹폰트 형식으로 먼저 변환하자.
(참조: 폰트 파일을 웹폰트(확장자 eot)로 변환하기 )

 

 

우선 필요한 폰트를 다운로드 하도록 알려야 한다. 이를 위해 CSS명령어 중 @font-face라는 지시어를 이용해서 브로우저에 해당 서체를 다운로드 할 것을 알릴 수 있다.

그 다음에는 원하는 위치에 해당 폰트를 적용하면 된다.

 

위의 두 가지 방법만 차례대로 수행하면 원하는 곳의 폰트를 변경할 수 있다.

 

1. @font-face 작성하기

현재 사용하는 스킨에도 해당 코드가 있을 것이다. @font-face는 여러 개를 사용해도 된다. @font-face를 추가하기 위해 블로그의 스킨편집 메뉴로 이동한다. 여기서 html 편집을 누른다.

 

 

티스토리 블로그 html편집 메뉴 이동

 

 

그럼 HTML, CSS, 파일업로드를 선택할 수 있는 메뉴가 나온다. 여기서 CSS를 선택한다. 여기서 @font-face를 검색하면 기존에 작성한 코드도 찾을 수 있을 것이다.

 

Noto Sans Korean 폰트를 사용한다면 아래의 코드만 추가하면 된다.

 

@font-face {
    font-family: "NotoSansCJKkr-Light";
    font-style: normal;
    font-weight: 900;
    font-display:auto;
    src: url(https://fonts.gstatic.com/s/notosanskr/v12/PbykFmXiEBPT4ITbgNA5Cgm203Tq4JJWq209pU0DPdWuqxJFA4GNDCBYtw.0.woff2) format('woff2');
}

 

 

가지고 있는 다른 폰트를 사용하고 싶다면, 폰트 파일을 업로드 해야 한다. 파일 업로드 메뉴를 선택하고 폰트를 업로드 한다. 파일은 images폴더에 업로드된다. 업로드 한 후에는 우측 상단에 저장 버튼을 누르는 것을 잊지 말자. 필자는 자주 잊는다.

 

폰트를 업로드 한 이후에는 아래와 같이 @font-face를 CSS에 추가한다. 여기서는 NotoSansCJKkr-Light 폰트를 사용한다고 가정하고 작성해보았다.

 

@font-face {
    font-family: "NotoSansCJKkr-Light";
    font-style: normal;
    font-weight: 900;
    font-display:auto;
src: url(./images/NotoSansCJKkr-Light.eot);
}

 

 

이제 폰트를 사용할 수 있는 준비는 끝났다. 이제 원하는 위치에 해당 폰트를 사용하겠다고 알리면 된다.

 

 

2. 원하는 위치에 폰트 적용하기

이 작업도 CSS를 이용하면 편리하다. 원하는 위치의 태그에 해당 폰트를 적용하면 된다. 적용하는 방법은 아래와 같이 font-family라는 속성만 변경하거나 추가하면 된다. 필자는 본문의 스타일이 post-content라는 클래스 속성에 지정되어 있다. 그래서 아래와 같이 폰트를 변경하였다.

 

.e-content.post-content p {
    font-family: "NotoSansCJKkr-Light" !important;
}

 

 

현재 사용하는 블로그 스킨마다 바꿔야 하는 위치는 다를 수 있다. 이는 크롬 개발자 도구를 이용하면 확인할 수 있다. 예를 들어 에전에 사용하던 스킨은 @font-face를 작성하고, 아래 위치를 변경해야 했다.

 

 

티스토리 블로그  폰트 변경

 

 

폰트는 가독성이 높은 것이 블로그 운영하는데 좋다. 필자는 Noto Sans Korean 폰트를 추천한다. 그 이유는 이전 포스팅을 참조하기 바란다.
( 참조: 티스토리 블로그 폰트 비교-noto sans korean vs 나눔바른고딕 )

 

 

원하는 폰트로 변경하여 티스토리 블로그를 운영하는데 도움이 됐기를 바란다.