시스템 폰트로 나눔고딕 적용하기
관리자 -> 꾸미기 -> HTML/CSS 편집으로 들어간 후 style.css 에서 나눔고딕으로 표시되길 원하는 부분의 font-family(또는 Font) 의 가장 첫 폰트로 나눔고딕을 적용하면 됩니다. [영문 윈도우 사용자를 위한 NanumGhotic 도 함께 적용해주면 좋음]
아래는 제 블로그 스킨을 기준으로 한 예시이며 스킨에 따라 CSS 구성이 조금씩 다를 수 있습니다.
블로그 전체 기본 폰트 설정 - Body
블로그 본문 기본 폰트 설정 - Article
블로그 댓글 기본 폰트 설정 - Comment
그 외 제목이나 방명록, 사이드바와 같은 부분들은 스킨마다 차이가 좀 크기 때문에 잘 찾아서 적용하시면 될 듯 합니다. 참고로 이렇게 시스템 폰트를 사용하는 경우 사용자의 시스템에 나눔고딕 폰트가 설치되어 있지 않다면 나눔고딕 폰트는 적용되지 않습니다. 즉, 오직 나눔고딕 폰트가 설치되어 있는 사용자만을 고려한 구성이 되는 것이죠.
이러한 문제없이 모든 사용자에게 동일하게 나눔고딕 폰트를 적용한 화면을 보여주려면 웹폰트를 사용해야 합니다.
웹폰트로 나눔고딕 적용하기 - 모빌리스 웹폰트 서비스
모빌리스 나눔고딕 웹폰트 서비스를 통해 나눔고딕 웹폰트를 적용하는 방법입니다. 따로 블로그에 폰트 파일을 업로드할 필요 없이 모든 웹 브라우저에서 호환되는 웹폰트를 쉽게 적용할 수 있다는 장점이 있습니다. 웹폰트이기 때문에 사용자의 시스템에 나눔고딕 폰트의 존재 유무와 상관없이 모든 사용자에게 동일하게 나눔고딕 폰트로 내용을 표시해줄 수 있습니다.
모빌리스 나눔고딕 웹폰트의 적용 방법은 매우 간단합니다. style.css 의 시작 부분에 다음의 소스를 추가한 후 사용하면 됩니다. [보통 @charset "utf-8"; 다음에 추가하면 됩니다.]
@import url('http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb');
이후 해당 웹폰트(나눔고딕)을 적용할 대상의 Font, Font-Family 에 아래와 같이 NanumGothicWeb 으로 폰트를 적용하시면 됩니다.
font-family : NanumGothicWeb;
웹폰트로 나눔고딕 적용하기 - 블로그 업로드
외부의 서비스를 이용하지 않고 직접 블로그의 스킨에 웹폰트 파일을 업로드하고 블로그 내에서 웹폰트를 처리하는 방법입니다. 일단 아래의 두 폰트 파일을 다운로드하여 블로그 스킨에 업로드하셔야 합니다.
NanumGothic.eot
이후 style.css 의 시작 부분에 다음의 소스를 추가합니다. [보통 @charset "utf-8"; 다음에 추가하면 됩니다.] 이 때 font-family 부분의 이름은 자신이 사용하기 편한 이름으로 지정하면 됩니다.
@font-face{
font-family: "NG";
src: url('images/NanumGothic.eot');
src:local(※), url('images/NanumGothic.woff') format('woff')
}
font-family: "NG";
src: url('images/NanumGothic.eot');
src:local(※), url('images/NanumGothic.woff') format('woff')
}
이후 해당 웹폰트(나눔고딕)를 적용할 대상의 Font, Font-Family 에 아래와 같이 앞서의 소스에서 지정했던 이름인 NG 로 폰트를 적용하시면 됩니다.
font-family : NG;
참고로 이러한 방식으로 자신의 블로그에 웹폰트 파일을 업로드하여 사용하는 경우, 윈도우 8 에 포함된 IE 10 에서는 웹폰트가 정상적으로 작동하지 않는 문제가 있습니다. 결국 IE 10 까지 고려하려면 앞서의 웹서비스를 활용하는 것이 좋습니다. 그러니 이 단락은 이렇게도 가능하다는 참고로만 알아두시면 될 듯 합니다. 추가로 아래 박스는 위에서 제공한 소스 코드에 대한 설명입니다.
* 소스 코드 이해하기 : http://naradesign.net/wp/2012/06/19/1830/
그냥 이곳에서 해당 코드에 대한 설명을 간단하게 하자면 IE 6~9 까지는 eot 폰트만을 지원하고(IE9 는 woff 까지 지원), 파폭, 사파리, 크롬과 같은 다른 웹 브라우저는 woff 폰트만을 지원하기 때문에 모든 웹 브라우저를 지원하기 위해서는 eot 와 woff 를 별개로 나눠 @font-face 를 두 번 지정해야 합니다. 하지만 이럴 경우 IE 에서는 eot 는 물론 woff 까지 중복하여 다운로드하게 되고 그만큼 IE 에서는 로딩 속도 지연 현상이 발생하게 됩니다. 그래서 일명 방탄 코드라고 하여 IE 에서 인식하지 못하는 구문을 끼워넣음으로써 브라우저에 따라 자신에게 맞는 웹폰트만 다운로드 받게끔 하나로 처리한 것입니다.
그냥 이곳에서 해당 코드에 대한 설명을 간단하게 하자면 IE 6~9 까지는 eot 폰트만을 지원하고(IE9 는 woff 까지 지원), 파폭, 사파리, 크롬과 같은 다른 웹 브라우저는 woff 폰트만을 지원하기 때문에 모든 웹 브라우저를 지원하기 위해서는 eot 와 woff 를 별개로 나눠 @font-face 를 두 번 지정해야 합니다. 하지만 이럴 경우 IE 에서는 eot 는 물론 woff 까지 중복하여 다운로드하게 되고 그만큼 IE 에서는 로딩 속도 지연 현상이 발생하게 됩니다. 그래서 일명 방탄 코드라고 하여 IE 에서 인식하지 못하는 구문을 끼워넣음으로써 브라우저에 따라 자신에게 맞는 웹폰트만 다운로드 받게끔 하나로 처리한 것입니다.
웹폰트의 사용에 대해 생각해보기
블로그의 내용이 모든 사용자에게 동일한 폰트로 표시되길 원한다면 당연히 웹폰트를 사용하는 것이 맞습니다. 하지만 일단 실제로 블로그에서 웹폰트를 적용하기 전에 과연 웹폰트를 반드시 사용해야 하는가? 라는 문제를 생각해보셔야 할 듯 합니다. 블로그에 나눔고딕 폰트를 적용하는 방법은 위에서 설명한 것과 같이 총 세 가지의 방법이 있습니다.
시스템 폰트 적용 : 사용자의 시스템에 나눔고딕이 설치되어 있으면 나눔고딕으로 표시. 아니라면 다음 폰트를 적용.
웹폰트 적용(블로그 업로드) : 블로그에 폰트 파일을 업로드하고, 이를 CSS 에서 @font-face 로 불러오는 방법.
웹폰트 적용(웹폰트 서비스) : 웹폰트 서비스를 이용하여 외부에서 웹폰트를 불러오는 방법.
웹폰트 적용(블로그 업로드) : 블로그에 폰트 파일을 업로드하고, 이를 CSS 에서 @font-face 로 불러오는 방법.
웹폰트 적용(웹폰트 서비스) : 웹폰트 서비스를 이용하여 외부에서 웹폰트를 불러오는 방법.
시스템 폰트 적용은 반드시 블로그를 방문한 사용자에게 나눔고딕이 설치되어 있어야 해당 텍스트가 나눔고딕으로 표시됩니다. 사용자의 시스템에 설치되어 있는 폰트를 사용하기 때문에 폰트로 인한 웹 페이지의 로딩 속도 저하 없이 곧바로 텍스트가 출력된다는 장점이 있습니다. 하지만 해당 폰트가 없는 사용자는 다른 폰트로 텍스트가 표시되기 때문에 서로가 다른 폰트로 글을 읽게 되는 단점이 있습니다.
웹폰트 적용은 사용자의 시스템에 해당 폰트의 존재 유무와 상관없이 블로그(또는 외부 서비스)에서 직접 폰트를 다운로드 받아 표시하기 때문에 해당 텍스트가 누구에게나 나눔고딕으로 출력 됩니다. 즉, 블로그를 방문하는 모든 사용자가 같은 폰트로 글을 읽게 만들 수 있는 장점이 있습니다. 하지만 지정한 웹폰트를 완전히 다운로드 받아야 비로소 텍스트가 표시되기 때문에 그 사이에는 웹폰트가 적용된 부분은 화면에서 보이지 않는 치명적인 단점이 있습니다.
시스템 폰트와 웹폰트 두 가지를 한 번에 적용해도 됩니다. CSS 의 폰트 설정은 가장 먼저 선언된 폰트를 읽고, 해당 폰트를 사용할 수 없다면(시스템에 해당 폰트가 없거나, 읽을 수 없거나) 다음 폰트로 넘어가기 때문이죠. 즉,
font-family : 나눔고딕, NamumGodhicWeb;
이와 같이 CSS 가 적용되었다면 가장 먼저 사용자의 시스템에서 나눔고딕을 찾고, 못 찾으면 다음으로 웹폰트가 적용되는 것이죠. 그래서 나눔고딕 웹폰트를 적용할 것이라도 위와 같이 나눔고딕 시스템 폰트를 앞으로 설정하여, 나눔고딕 폰트를 설치하여 사용 중인 사용자는 웹폰트대신 자신의 시스템 폰트를 사용하도록 해주는 것이 좋습니다.
단락 시작에서 이야기했듯이 모든 사용자에게 동일한 결과를 보여주려면 당연히 웹폰트를 사용해야 합니다. 칼같은 깔맞춤을 중시하는 사용자라면 더더욱 사용하는 것이 좋겠죠. 하지만 블로그를 운영하다보면 처음에 언급했던 웹폰트는 반드시 먼저 다운로드가 완료되어야 비로소 웹폰트가 적용된 부분이 표시된다는 단점이 굉장히 크게 작용하기도 합니다.
한국 사람들 성격 정말 급합니다. 특히나 광속의 인터넷 환경에 완전히 적응된 국내 사용자들은 약간의 로딩도 견디지 못하는 성향이 있습니다. 블로그 방문자의 대다수는 검색을 통해 들어오는 사용자죠. 검색을 통해 들어왔는데 정작 글은 표시되지 않고 레이아웃만 출력된채 본문이 비어있다면? 창을 닫아 버리고 다른 곳으로 가버릴 위험이 있습니다. 모든 인터넷 사용자가 웹폰트의 특성을 아는 것은 아니기 때문에 이게 웹폰트 로딩 중인지 아니면 진짜로 글이 없는 건지 모르기 때문이죠. 그냥 여긴 뭔가 잘못된 곳인가 보다 하고 나가 버릴 가능성이 있다는 거죠. 그리고 검색 결과는 많으니까요. 다른 곳에서 보면 되죠.
물론 웹폰트 파일은 1MB 내외이고 한국의 인터넷 회선 상황으로 봤을 때 로딩 속도에 크게 영향을 미치지 않을 수도 있습니다. 하지만 언제나 내 블로그(웹폰트 서비스)의 파일 전송 속도가 광속을 달리고 있을거라는 보장은 없습니다. 가끔은 블로그가 평상시보다 좀 늦게 뜨기도 하죠. 이럴 땐 웹폰트가 정말 치명적으로 작용할 수도 있습니다. 외부에서 웹폰트를 가져오는 서비스의 경우 해당 서비스 제공 업체의 상황이 언제나 쾌적하리라는 보장 또한 없습니다. 여기에 더해 내 블로그를 방문하는 사용자의 네트워크 상태가 항상 쾌적하리라고 장담할 수도 없습니다. 결국 이러한 것들이 맞물려 본문의 출력이 다소 늦어지는 상황이 자주 발생하다 보면, 어쩌면 내 블로그의 중요한 고정 팬이 될 수도 있었을 법한 유입 방문자를 놓쳐버릴 수도 있는 상황이 올 수 있는 것이죠. [심지어 저도 레이아웃(스킨)만 먼저 뜨고 본문이 좀 늦게 뜨는 곳은 그냥 안 가버립니다. 솔직하게 말해서 짜증나거든요.]
여기에 더해 나눔고딕은 클리어타입에 최적화된 폰트입니다. 네이버의 무료 폰트 나눔글꼴 설치하기 글의 마지막에 비교한 것과 같이 클리어타입이 적용되어있지 않은 상태라면 나눔고딕은 최악의 가독성을 보여줍니다.
보통 자신이 직접 나눔고딕을 설치한 경우에는 클리어타입을 활성하는 체크 박스를 마지막에 제공하기 때문에 클리어타입이 적용되어 있을 가능성이 높지만, 아무래도 웹폰트로 바로 보여주는 경우에는 클리어타입이 적용되지 않은 상태로 글을 보고 있을 가능성이 자신이 직접 설치하여 보고 있는 사용자보다는 더 높을 수밖에 없다는 겁니다. [아직도 윈도우 XP 사용자는 굉장히 많습니다.] 그러한 방문자들을 위해 찾아다니면서 "여러분~ 클리어타입 활성화하세요. 뿌잉~뿌잉~" 할 수도 없는 노릇이죠. 블로그 구석 어딘가에 "이 블로그는 클리어타입을 활성화해야 정상적으로 보입니다." 라고 박아놔도 그걸 읽느냐는 말이죠. 사실 웹폰트의 로딩 문제는 너무 과하게 우려하는 것이 아닌가 라고 생각 할 수도 있는 문제이지만, 제 개인적으로 생각하기에 이건 정말 큰 문제가 될 수 있다고 생각합니다. 이 땅에 윈도우 XP 가 사라지지 않는 한 언제든지 발생할 수 있는 문제니까요.
아무튼 이러한 연유로 실제로 웹폰트를 적용하기 전 먼저 이것을 깊이 생각해보아야 할 필요가 있다고 생각합니다. 참고로 캐플 블로그는 나눔고딕을 기본 폰트로 사용하고 있지만 웹폰트는 적용하고 있지 않습니다. 오직 나눔고딕 폰트를 시스템에 직접 설치한 사용자에 한해 폰트가 적용되도록만 해놨죠. 그냥 웹폰트의 사용에 이런 문제가 있을 수도 있다는 것을 이야기하고 싶었습니다. 이상입니다.
참고로 글에서 사용한 나눔고딕 폰트는 모든 라이센스가 완전히 열려있는 폰트입니다. 그래서 사용자가 직접 eot 나 woff 파일로 변환하여 웹폰트로 적용하여도 아무런 문제가 없는 것이죠. 참고하세요.
