본문 바로가기

IT/블로그

티스토리 블로그 글꼴을 "렉시새봄" 글꼴로 바꾸어 보자.

반응형

블로그를 운영하다보면 제일 신경 쓰이는 것이 글꼴 인 것 같습니다. 레이아웃을 잘 잡아놔도 글꼴이 어울리지 않으면 블로그 자체가 허접하게 보이기 쉽습니다.

블로그를 훌륭하게 잘 운영하시고 계신 백전백승님의 블로그를 보니까 글꼴이 너무 맘에 들어서 저도 그 글꼴을 쓰기로 하고, 제 블로그의 글꼴을 “나눔고딕”에서 “렉시새봄R"로 바꾸었습니다. 혹시 여러분도 “렉시새봄R" 글꼴을 사용하고 싶으시면 아래의 파일을 받아서 사용하시면 될 것 같습니다. 

블로그에서의 글꼴은 웹폰트로 사용해야합니다. 쉽게 설명하자면 웹폰트 파일은 확장자가 “*.eot" 와 ”*.woff" 로 끝나는 파일입니다. 


아래 파일은 “렉시새봄R" 폰트를 압축해 놓았습니다. 웹폰트와 포토샵,파워포인트,엑셀,한글,워드,... 등에서 사용할 수 있는 트루타입 글꼴도 같이 압축되어 있습니다. 참고로 렉시새봄R은 KLDP.net에서 개발된 한글 글꼴로서 GNU GENERAL PUBLIC LICENSE로 제공되는 것으로 무료로 사용할 수 있습니다.


LexiSaebomR.zip



티스토리에서 글꼴을 바꾸기 위해서는 일단 웹폰트 파일인 eot, woff 파일을 일단 블로그에 올려야 합니다.  그리고 그 파일의 링크주소를 알아낸 후에 티스토리의 관리메뉴로 들어가서 “HTML/CSS 편집”으로 간 후에 “CSS" 부분을 바꾸어 줘야 합니다.


바꾸어야 하는 부분은 CSS파일의 상단에 있는 @charset "utf-8"; 바로 밑에다 추가로 코드를 입력해줘야 합니다.


/* 웹폰트 설정 start */

@font-face {

font-family:렉시새봄R;

src: url('http://cfs.tistory.com/custom/blog/105/1057898/skin/images/LexiSaebomR.eot');

src: url('http://cfs.tistory.com/custom/blog/105/1057898/skin/images/LexiSaebomR.eot?#iefix') format('embedded-opentype'), url('http://cfs.tistory.com/custom/blog/105/1057898/skin/images/LexiSaebomR.woff') format('woff');

font-weight: normal;

font-style: normal;

}

/* 웹폰트 설정 end */


상기의 “http://cfs.tistory.com/custom/blog/105/1057898/skin/images/” 이부분을 자신의 티스토리 파일의 링크주소로 바꾸어 줘야 합니다.


아래에 설정과정을 그림으로 붙여 두었으니 관심있으신 분들은 참고 해주세요.


1. 티스토리의 관리메뉴로 들어가서 HTML/CSS 메뉴로 들어간다.


2. 글꼴파일을 업로드 하기 위해 파일업로드 선택한다. 


3. 아래쪽에 있는 "+추가" 메뉴를 선택한 후에 글꼴 파일(LexiSaebomR.eot, LexiSaebomR.woff)을 선택하여 파일을 업로드 한다.


4. LexiSaebomR.eot 파일을 찾아서 오른쪽마우스 키를 눌러서 "링크주소"를 복사한다.


5. 상기 그림처럼 CSS를 눌러서 파일을 연후에 상기와 같이 3군데를 바꾸어 준다. 첫번째 큰박스의 링크주소는 여러분이 아까 복사해둔 eot파일의 링크주소로 대체해 준다. 그리고 body 태그의 font-family에 "렉시새봄R"을 추가해준다. font-size나 line-height는 여러분의 취향에 맞게 수정해준다.


즐거운 하루 되세요.

반응형