모빌리스 웹폰트 유료화에 따른 구글 웹폰트의 티스토리 설정법

구글 웹폰트, 티스토리에 적용하는 방법

제 블로그는 지난 해 9월부터 모빌리스 웹폰트를 적용하고 잘 사용해 왔습니다.

 

웹폰트를 적용한 후, 방문자의 브라우저 종류에 관계없이 같은 글꼴, 같은 레이아웃의 화면을 보여줄 수 있어 무척 유용하게 사용해 왔습니다.

 

가끔 모빌리스 웹폰트 서버에 문제가 있는지 폰트를 제대로 불러오지 못하는 경우도 있었지만 자주 있는 일은 아니었고, 무료로 제공되는 서비스라 어쨌든 고맙게 사용해 왔습니다.

웹폰트가 무엇인지, 왜 쓰는지 궁금하다면 아래 포스팅을 읽어보세요.

2012/09/09 - 여러 브라우저에서 같은 폰트를 보려면, 모빌리스 웹폰트 적용하기

 

그런데, 며칠전부터 모빌리스 웹폰트가 제대로 표시되지 않았습니다.

의례 일시적인 증상일 것이라 생각하고 그냥 넘겼는데, 며칠째 웹폰트가 제대로 표시되질 않은 것을 보니 뭔가 문제가 생긴것 같단 생각이 들었습니다.

모빌리스 웹사이트를 방문했더니, 무료 시범 서비스 기간이 끝나고 유료화가 되었다고 하는군요.

잘 뜨던 웹폰트가 갑자기 뜨질 않아 가봤더니 유료화 메시지가...

 

그간 모빌리스 웹폰트를 고맙게 사용해왔지만, 아무런 통보없이 웹폰트 서비스를 사용할 수 없게 만든 점은 좀 당황스러웠습니다.

물론, 모빌리스 웹폰트를 사용할 때 별도의 가입 과정없이 URL만 긁어 사용해 왔으니 업체 입장에서는 사용자에게 따로 통보하기도 곤란하겠다 싶지만, 새로 가입하면 기존 소스코드 수정없이 사용할 수 있다는 것으로 보아, 방법이 아예 없는 것은 아닐텐데...하는 아쉬움이 남습니다.

 

유료화되면서 가격은 월 방문자수에 따라 달라지는데, 생각보다 비쌉니다. 제 블로그 월 방문자수를 기준으로 본다면, 웹폰트를 위해 월 4만원 가량의 비용을 지불해야 하는군요.

 

게다가 가입 신청을 한 비영리 개인에게는 무료 서비스를 제공한다고는 하지만, 월 방문자수 5000명까지로 제한되며 매월 연장 신청을 해야한다니, 이건 쓰라고 만들어 놓은 서비스로 보이진 않는군요.

무료 서비스는 매달 연장 신청을 해야하며, 연장신청은 만료일 1주일 이전에만 신청 가능!!!!

 어쨌든, 모빌리스 웹폰트를 대체할 것이 없을까? 찾아보니 구글에서도 웹폰트 서비스를 제공하고 있었고, 잠시 짬을 내어 수정 작업을 완료했습니다.

구글 웹폰트를 티스토리에 적용하기 - 기본 사용법

구글 웹폰트 서비스는 서구권의 영문 폰트 위주로 서비스를 제공해왔지만, 얼마전부터 한글 폰트인 나눔 글꼴 시리즈를 제공하기 시작했습니다.

다만, 비영어권 폰트라 구글 웹폰트 정식 웹사이트 대신 별도의 페이지에서 사용해야하는데 몇몇 기능에서 살짝 아쉬운 점이 있지만, 기존 나눔 고딕 웹폰트를 이용했던 저는 어쨌든 감사할 따름입니다.

 

1. 구글 웹폰트 제공 페이지에 접속하여 나눔 고딕 폰트를 찾습니다.

나눔 고딕(Nanum Gothic)/나눔 명조(Nanum Myeonjo)/나눔 손글씨 붓체(Nanum Brush Script)/나눔 손글씨 펜체(Nanum Pen Script) 등 나눔 폰트 시리즈 전체를 지원하는군요.

구글 웹폰트가 제공하는 나눔 폰트 시리즈

 

2. 저는 나눔 고딕과 나눔 명조체를 사용하기로 했고, 먼저 나눔 고딕 Link 항목의 URL을 복사했습니다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

 

3. 티스토리 관리자의 HTML/CSS 편집 메뉴로 들어와 style.css 섹션을 살펴봅니다.

모빌리안 웹폰트는 일단 /*  */ 코드를 붙여 주석처리한 후(빨간색 표시 부분 - 그냥 지워도 무방합니다) 앞서 복사한 구글 웹폰트의 코드를 붙여넣습니다(파란색 표시 부분). 저는 나눔 명조 웹폰트의 URL도 복사해 넣었습니다.

티스토리 관리자의 HTML/CSS 편집 메뉴에서 style.css에 구글 웹폰트 링크를 적는다

 

4. 티스토리 관리자의 HTML/CSS 페이지의 skin.html과 style.css에서 웹폰트를 적용할 곳을 찾아 구글 웹폰트 이름을 적어줍니다.

대개 여러 개의 폰트 이름이 적힌 곳의 첫 번째에 구글 웹폰트 이름을 적어주면 되는데, 저는 기존 모빌리스 웹폰트를 적용해둔 상태이므로, CTRL+F 키를 눌러 NanumGothicWeb과 NanumGothicBoldWeb을 찾아 구글 웹폰트 이름인 Nanum Gothic과 Nanum Myeongjo로 적절히 대체했습니다.

 

구글 웹폰트에 적용된 나눔 고딕 폰트 이름은 'Nanum Gothic', 나눔 명조는 'Nanum Myeongjo'이며 웹폰트 이름은 대소문자와 띄어쓰기를 구분하는 것에 유의합니다.

아울러, skin.html이나 style.css를 수정하기 전, 만일에 대비해 반드시 백업을 해 둔 상태에서 수정작업을 할 것을 권합니다.

 

5. skin.html과 style.css의 폰트 설정이 모두 끝나고, 저장 후 접속하니 웹폰트가 적용된 블로그 화면을 다시 볼 수 있었습니다.

기존에는 나눔 고딕과 나눔 고딕 볼드체만 적용했는데, 이번에는 나눔 명조체도 적용해봤습니다.

중간중간 포인트를 주는 식으로 사용하면 느낌이 괜찮은 듯 합니다. 단, 여러 웹폰트를 한꺼번에 설정하면 로딩 속도가 느려지므로 주의합니다.

나눔 고딕과 나눔 명조를 적용한 상태

구글 웹폰트 세부 적용 - Bold, Extra Bold 폰트 사용법

저는 모빌리언 웹폰트 중 나눔 고딕과 나눔 고딕 Bold의 두가지 폰트를 사용했습니다.

모빌리언 웹폰트는 나눔 고딕과 나눔 고딕 Bold의 폰트 이름이 달라 쉽게 설정할 수 있었는데요, 구글 웹폰트에서는 사용법이 조금 달랐습니다.

HTML이나 CSS 문법에 익숙한 분이라면 쉽게 알 수 있었겠지만 그렇지 못했던 저는 몇 번의 시행착오를 겪은 후에야 방법을 알아낼 수 있었기에 방법을 공유하고자 합니다.

 

구글 웹폰트에서 서비스 중인 나눔 고딕, 나눔 명조는 하나의 링크안에 일반, Bold, Extra Bold의 세 가지 폰트가 한꺼번에 들어가 있으며 font-weight: 속성으로 각 폰트를 불러 쓸 수 있습니다.

 

즉, skin.html이나 style.css에 정의된 폰트 속성에 font-weight:700; 이 추가되면 Bold로, font-weight:800; 이 추가되면 Extra Bold로 사용할 수 있습니다. font-weight: 속성값이 없거나 400을 적으면 일반 폰트가 들어갑니다.

 

style.css에 정의된 폰트 속성 하나를 예로 들면,

c_cnt {font:11px Nanum Gothic, font-weight:700;} /*나눔 고딕 Bold로 사용*/
c_cnt {font:11px Nanum Gothic, font-weight:800;} /*Extra Bold로 사용*/
c_cnt {font:11px Nanum Gothic, font-weight:400;} /*일반 폰트로 사용*/

이렇게 폰트 속성 뒤에 font-weight를 이용하면 Bold, ExtraBold 폰트를 간단히 사용할 수 있습니다.

 

물론, font-weight를 이용한 속성은 구글 웹폰트 전체에 적용되는 것은 아니며, 구글 웹폰트에 미리 정의되어 있기때문에 가능합니다.

사용 가능 여부는 각 웹폰트의 CSS 파일을 열어보면 되는데, 나눔 고딕이나 나눔 명조체에서는 사용가능하므로 복잡하게 생각하지 말고 그냥 font-weight 속성만 적용해 사용하면 됩니다.

 

혹시라도, CSS 파일에 정의된 소스코드가 궁금한 분은 아래 expand source 버튼을 클릭해 소스코드를 열어보세요.

/* 
 * Nanum Gothic (Korean) http://www.google.com/webfonts/earlyaccess
 */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanumgothic/v3/NanumGothic-ExtraBold.ttf) format('truetype');
}

모빌리스의 건투를 빌며...

그동안 모빌리스 웹폰트를 무척 고맙게 사용해왔습니다. 비록 시범 운영 기간이 끝나고 유료화가 되었고, 책정한 요금이 제가 생각한 수준과 맞지 않아 떠나지만 업체의 건투를 빕니다. 기업은 이윤을 추구하는게 당연합니다.

하지만 구글 웹폰트와 같은 거의 완벽한 무료 대체재가 있는 상황^[각주:1]에서 월 수만원 이상의, 다소 무리한 수준으로 책정된 요금, 기존 사용자에게 통보없이 일방적으로 서비스를 중단한 점, 게다가 비영리 개인^[각주:2]에게 무료로 서비스를 제공한다지만 매달 계약을 갱신하도록 한 점은 다소 무리수인듯한, 아쉬움이 남는군요.

 

관련글

• 2013/08/02 - 구글의 PageSpeed Insights로 내 블로그 개선점을 찾아보자
• 2013/05/09 - 티스토리 이미지에 나만의 도장, 워터마크 간편하게 찍는 법
• 2013/04/12 - 블로그에 올린 사진 색감, 포토샵에서 보던 것과 달랐던 원인은?
• 2012/11/26 - 크롬 브라우저가 내 블로그를 악성코드로 차단! 대처 방법은?
• 2012/09/09 - 여러 브라우저에서 같은 폰트를 보려면, 모빌리스 웹폰트 적용하기
• 2012/06/25 - 어도비가 내 블로그를 체크해준다 - Adobe BrowserLab
• 2012/06/22 - 깔끔한 내 블로그, 다른 브라우저에선 깨질 수 있다?
• 2012/06/11 - 내 포스팅의 HTML 소스는 왜 이리 지저분할까?
• 2012/06/09 - 티스토리 이미지와 글 간격을 줄이려면?
• 2012/06/05 - 티스토리 각주 글꼴 색상 설정하려면?

1. 모빌리스는 다양한 웹폰트를 지원하지만, 나눔폰트만 이용하는 사람이라면 구글 웹폰트가 완벽한 대안이 된다. [본문으로]
2. 구글 웹폰트는 개인/기업을 막론하고 무료로 사용할 수 있다. [본문으로]