티스토리 꾸미기, 폰트 바꾸기

티스토리에서 디폴트로 제공하고 있는 폰트도 나눔 고딕을 포함해서 5개나 되어 자신의 블로그를 꾸미는데 크게 불편함은 없다.

그래도 좀 차별화가 되고 가시성이 높은 폰트를 찾아서 블로그를 꾸미게 되면 블로그의 시각성을 좋게 하는데 큰 도움이 될 것이다.

그래서 나는 리디바탕체를 다운로드하여서 설치하기로 했다.

리디바탕체는 전자책으로 유명한 리디북스에서 제공하는 폰트이다.

아무래도 전자책 사업을 하다보니 소비자가 편하게 읽을 수 있는 폰트에 대해서 관심이 많았을 것이고 이에 상당한 리소스를 투입에서 개발한 것이 리디바탕체라고 한다. 약간 명조체 느낌이 나는데 이에 비해서 글을 보기에 편안한 느낌이다. 특히 스마트폰에서 보기가 좋은 것 같다.

자신의 웹페이지 (블로그)에 폰트를 바꾸기 위해서는 웹서버에 폰트 파일을 특정 폰트 폴더에 넣어 두고 블로그의 메인 페이지인 Index.html에서 디자인쪽 영역을 담당하는 언어인 CSS에 이 폰트를 지정하면 된다.

이런 방법 외에도 요새는 구글 등에서 웹폰트를 제공하므로 굳이 자신의 서버에 폰트 파일을 넣어 두지 않고 페이지를 읽을 때마다 웹폰트를 로딩해서 사용하는 방법도 있다. 웹폰트 파일도 작아지고 인터넷 속도도 빨라져서 이 방법도 많이 사용한다.

하지만, 티스토리는 폰트 변경을 하기 쉽게 티스토리 관리자를 제공하므로 굳이 웹폰트를 사용할 필요는 없을 것 같다.

그럼, 어떻게 리디바탕체를 설치할 것인가? 기본적인 플로우 (Flow)는 간단하다.

먼저 리디바탕체를 자신의 PC에 다운로드한 다음에 티스토리 관리자를 이용해서 이 파일을 웹서버 특정 폴더에 업로딩하고 나서, CSS 파일을 살짝 수정해 준다.

이때 사용하는 CSS 명령어가 font-family 속성 정의와 @font-face 지시어이다.

리디 바탕체 다운로드하기

아래 사이트에서 폰트 파일을 자신의 PC로 다운로드한다.

https://www.ridicorp.com/branding/fonts/ridibatang/

리디바탕

더 선명하고, 긴 문장도 잘 읽을 수 있는 전자책 전용 글꼴 리디바탕을 소개합니다.

www.ridicorp.com

자신의 티스토리 웹서버에 폰트 올리기

① 티스토리 관리자 → 스킨 편집 → html 편집으로 이동

② 파일 업로드 → "+" → 다운로드하여둔 리디바탕체 (RIDIbatang.otf)를 선택한 후에 "적용"을 누른다.

참고로 티스토리의 경우에 올릴 수 있는 파일의 용량이 20MB인 모양이다.

CSS 코드 수정하기

① 코드 내용

CSS 코드는 2개가 있다. 한 개는 @font-face를 이용해서 웹브라우저에게 폰트의 이름과 다운로드할 위치를 알려주는 것이다. 코드 내용은 아래와 같다.

<!--리디바탕체 적용 시작-->
@font-face {
    font-family: "RIDIBatang";
    font-style: normal;
    font-weight: normal;
    src: url('./images/RIDIBatang.otf');
}
<!--리디바탕체 적용 종료-->

2번째 부분은 font-family 속성 지정으로 "font-family : RODIBatang"으로 직접 지정해 주면 된다.

② 코드 심을 위치

@font-face는 CSS 파일 상단에 심으면 된다. 나의 경우는 소스 코드 맨 위, 15번째 라인에 넣었다.