티스토리 블로그에 D2 Coding 폰트 적용하기

내가 포스팅 하는 글들 중 많은 부분이 코드, 또는 스크립트가 있는 경우가 있는데

이 때 보통 컬러스크립터를 사용하여 포스팅을 진행하였다. 

하지만, 이 부분이 굉장한 시간 낭비이기도 하고(물론 하이라이팅이 지원된다는 점은 고무적이다.)

일관성을 해하는 부분이기도 해서

티스토리 블로그의 기본 폰트 자체를 D2 coding으로 바꾸고자 한다.

보통 인터넷에 있는 글들은 대부분 '나눔고딕코딩'을 기준으로 하며

상기 폰트의 경우 구글 웹페이지를 통하여 제공받을 수 있다는 장점을 가지고 있지만,

더 이상 naver 측에서 업그레이드를 진행하고 있지 않다는 듯 하다. 

'D2 coding'글꼴의 경우 업데이트가 이루어지고 있기 때문에

좀 더 발전할 여지가 있다는 점에서 장점을 가지고 있다. 

하지만, 구글 페이지에서 웹 폰트를 제공해 주지 않는다. 

다행히 능력자 분께서 D2 coding 웹 폰트를 제작해 주셨다. 

(https://github.com/Joungkyun/font-d2coding) 

위 사이트의 릴리즈를 일단 다운로드 받는다. 

티스토리의 경우 기본적으로 스킨을 꾸미기 위하여 20MB의 용량을 제공하고 있는데

압축을 풀어보면 절망적이게도 20MB를 넘는다.

따라서 위 웹폰트의 용량을 줄여야 한다. 

웹폰트에 대하여 검색을 해보니 여러 브라우저의 웹 폰트 지원에 대하여 설명이 나와 있었다. 

(http://www.beautifulcss.com/archives/431)

설명되어 있는 모든 브라우저가 웹폰트에 대응하기 위한 최소 집합은 EOT + TTF 이지만, 

밑의 설명에 따르면 빠르게 폰트를 보기 위하여 WOFF파일을 먼저 선언하는 것이 좋다고 이야기 하고 있다. 

따라서 WOFF + TTF + EOT 방식으로 폰트를 지원하도록 CCS파일을 변경하였다.

또한 불필요한(자주 사용하지 않는) D2 coding bold도 삭제하여 용량을 줄였다.

<d2coding.css>

-----------------------------------------------------------------------

/* 

 * D2 coding (Korean) http://dev.naver.com/projects/d2coding/

 */

@font-face {

  font-family: 'D2 coding';

  font-style: normal;

  font-weight: 400;

  src: url('d2coding.eot');

  src: local('※'), local('D2Coding'),

       url('d2coding.eot?#iefix') format('embedded-opentype'),

       url('d2coding.woff') format('woff'),

       url('d2coding.ttf') format('truetype');

}

-----------------------------------------------------------------------

줄인 결과 9.50MB의 용량을 가졌으며 티스토리의 HTML/CSS 편집 메뉴로 들어가 폰트 정보를 업로드 하였다. 

그 다음 HTML에 다음의 구문을 추가해준다. 

<link href="/path/d2coding.css" rel="stylesheet" type="text/css">

다음으로 CSS에 다음의 구문을 더해준다.(body 리셋 구문 이후에..)

body {
	font-family: D2Coding, 'D2 coding', monosapce;
}

적용을 해보면 다음과 같이 나오는데...

여백과 폰트 크기를 조정해 주어야 한다...

CSS파일을 뒤지다 보면 본문의 폰트를 설정하는 곳이 있는데 그 부분은 다음과 같다. 

175:  .area_view p {font-size:16px;line-height:28px; margin:0 auto 28px}

줄간격이 28/16 = 175% 로 되어있어 일견 보기에 줄간격이 좀 과다해 보인다.

취향에 맞게 다듬어 쓸 수 있도록 하다.

<테스트용 글>

-------------------------------------------------------

동해물과 백두산이 마르고 닳도록

하느님이 보우하사 우리나라만세.

무궁화 삼천리 화려강산

대한사람 대한으로 길이 보전하세.

-------------------------------------------------------

바꾼 결과는 아래와 같다. 

.area_view p {font-size:16px;line-height:140%; letter-spacing:0px; margin:0 auto 28px}

속성 값이 궁금하다면 다음의 주소를 참고하자 ( http://mp3download-textcube.blogspot.kr/2009/06/css-%EA%B8%80-%EC%9E%90%EA%B0%84-%EC%A4%84%EA%B0%84-%EC%84%A4%EC%A0%95%EB%B0%A9%EB%B2%95.html)

이제 적용을 하면 D2 coding 글꼴로 블로그를 볼 수 있다!

바꾸고 보니 평소에 과도하게 엔터를 많이 사용한 나를 반성할 수 있었다.. ㅜ_ㅜ

이후의 포스트에서는 꼭 엔터를 써야할 때만 써야겠다.