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

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

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

 

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

 

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

모빌리스 웹폰트 webfont 구글 웹폰트

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

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

 

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

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

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

모빌리스 웹폰트 webfont 구글 웹폰트잘 뜨던 웹폰트가 갑자기 뜨질 않아 가봤더니 유료화 메시지가...

 

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

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

 

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

 

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

모빌리스 웹폰트 webfont 구글 웹폰트무료 서비스는 매달 연장 신청을 해야하며, 연장신청은 만료일 1주일 이전에만 신청 가능!!!!

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

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

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

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

 

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

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

모빌리스 웹폰트 webfont 구글 웹폰트구글 웹폰트가 제공하는 나눔 폰트 시리즈

 

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

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

 

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

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

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

 

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

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

모빌리스 웹폰트 webfont 구글 웹폰트

 

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

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

 

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

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

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

모빌리스 웹폰트 webfont 구글 웹폰트나눔 고딕과 나눔 명조를 적용한 상태

구글 웹폰트 세부 적용 - 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]에게 무료로 서비스를 제공한다지만 매달 계약을 갱신하도록 한 점은 다소 무리수인듯한, 아쉬움이 남는군요.

모빌리스 웹폰트 webfont 구글 웹폰트

 

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

이 글을 공유하기

댓글(13) :: 댓글 입력은 녹색 댓글버튼 클릭 후 공개글로 달아주세요. 특별한 이유없는 비밀 댓글에는 답변하지 않습니다

  • 2013.03.05 08:41 신고

    헐.. 월 5천명이면 듣보잡 짐순이네 집도 종종 5천을 넘는뎁...
    뭐 기업의 목적은 이윤이라지만 가격을 너무 높게 잡은 거 아닌가 싶기도 하군요.
    짐순이야 걍 있는 거 써..라는 귀차니스트니까 쓸 일이 없는뎁..

    • 2013.03.06 10:46 신고

      5000이라는 숫자나 매월 연장신청을 하라는 등의 조건은, 공짜는 없다는 얘기로 들리더라구요 ㅡㅡ;;

  • 2013.03.05 09:29 신고

    잘 알아 간답니다 ~ ^^
    좋은 하루를 보내세요~

  • 2013.03.05 10:33

    모빌리스폰트라는 게 있는지도 몰랐어요
    티스토리는 뭐가 많고 복잡...
    그러고보니 컴터님 글씨체가 좀 달라진 것 같긴 해요
    더 가늘고 더 길고...?

    • 2013.03.06 10:47 신고

      원래 웹폰트를 쓰고 있었는데, 요 며칠새 웹폰트가 작동하지 않아 좀 딱딱한 글씨체였을꺼예요. 다시 좀 부드러운 폰트로 돌아온 느낌이랄까요 ㅎㅎ

  • 2013.03.05 10:35 신고

    제가 생각하기에 저는 귀차니스트거나 아니면 귀차니스트거나.....() 기술파면서도 그냥 주는거 쓰지 뭐..... 라는 생각을 하기 때문에..... 속세를 벗어난 것이나 해탈을 한것인가 물아인체인 것인가..... (응?)

    • 2013.03.06 10:48 신고

      산은 산이요, 물은 물인데, 저는 자꾸 물을 막고 보를 세우고 있습니다. 그래도 저는 제 블로그만 삽질을 하고 있다는게 차이점이죠 ㅡㅡㅋ

  • 2013.03.05 10:50 신고

    갑작스럽게 유료화를 단행하다니 좀 의외네요 ;

    • 2013.03.06 10:49 신고

      처음부터 시범서비스라고 했으니, 유료화하려나보다 싶긴했는데, 이렇게 통보도 없이 중단시켜버리니 좀 당황스러웠습니다!

  • 2013.03.06 08:25

    비밀댓글입니다

  • 2013.03.06 10:25 신고

    훔....................... 저는 기본체가 쓰니 그렇게 걸리는 일도 없으니 다행이네요.

    그래도 작년부터 좀 알게 됐습니다. 저자책에서도 특정 글씨체를 쓰면, 저작권료가 나간다고 하더군요.

    • 2013.03.06 10:53 신고

      '기본체'라는게 OS마다, 운영체제마다 글꼴 모양도, 문단 모양도 바뀌어버리니 신경이 쓰이더라구요. 보내는쪽에서 같은 폰트를 뿌려주니 개인적으론 꽤 만족합니다^^
      사실 꽤 욕심나는 폰트들도 많지만 저작권이...ㅡㅜ 그나마 저작권에서 자유로운 나눔폰트가 현재로서는 최선의 선택인듯 싶네요.

Designed by JB FACTORY