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

다른 브라우저에서도 같은 화면을 보고 싶다면? 웹폰트

블로그에 관심을 갖고 여러가지를 꾸미다보면 빼놓을 수 없는 것이 웹폰트 적용입니다.

 

컴퓨터에 설치된 굴림, 돋움, 바탕, 궁서 등의 폰트가 아닌 좀더 색다르고 가독성 높은 폰트를 내 웹사이트나 블로그 등에 적용하여 볼 수 있도록 한 것입니다.

 

제 블로그 역시 네이버에서 배포하는 나눔고딕 폰트를 웹폰트로 만들고 적용한지 꽤 오래됐습니다.

 

제 블로그에 웹폰트를 적용할 당시만해도 트루타입 폰트를 EOT라는, 저용량의 파일로 변환한 후 적용하는, 꽤 번거로운 과정을 거쳐야 했습니다. 

요즘은 EOT 파일을 쉽게 구할 수 있을 뿐 아니라 트루타입 폰트를 EOT 파일로 변환해주는 사이트도 있군요.[각주:1]

EOT 폰트의 문제점

EOT 형식으로 만든 웹폰트는 인터넷 익스플로러에서만 제대로 보인다는 단점이 있습니다

원래 EOT라는 웹폰트 형식이 마이크로소프트에서 만든 것이라 인터넷 익스플로러에서만 볼 수 있습니다.

 

즉, EOT 형식의 웹폰트만 설정해 두었던 제 블로그는 인터넷 익스플로러에서는 이렇게 보이지만

웹폰트 Webfont EOT WOFF TTF 크로스 브라우징

 

EOT 형식의 웹폰트를 인식하지 못하는 크롬에서는 같은 페이지가 이렇게 보이는 것이죠.

적용된 글꼴 종류가 다르니 모양과 줄간격, 줄넘김 위치가 각기 다릅니다.

웹폰트 Webfont EOT WOFF TTF 크로스 브라우징

 

국내 브라우저 시장 점유율은 인터넷 익스플로러가 절대 우위라는 점을 핑계삼아 알지만 오랫동안 내버려 두었던 문제입니다.

하지만 최근에는 인터넷 익스플로러 이외의 브라우저 점유율이 늘고 있는데다 줄 넘김이 엉뚱한데서 되다보니 글의 맥이 끊기는 등의 문제점까지 여러번 확인하게 되면서 이를 해결할 방법을 찾아보기로 했습니다.

모빌리스 웹폰트를 이용하는 법

인터넷을 찾아보니, 문제 해결 방법은 대략 두가지로 나뉩니다.

 

먼저 익스플로러용 EOT 파일, 다른 브라우저용 WOFF, TTF 폰트를 업로드한 후 font-face 태그로 브라우저별로 따로 불러오는 방법이 있습니다.

이 방법은 티스토리에서 적용 가능한 방법이지만, 폰트를 따로 준비해야하고 인터넷 익스플로러 9버전에서는 EOT와 WOFF 파일을 중복하여 읽어들일 수도 있는 등 여러모로 번거로운 작업이라 패스했습니다.

 

그리고, 이제부터 알아볼 간단한 방법, 모빌리스의 웹폰트를 설정하는 것입니다.

모빌리스 웹폰트는 티스토리 관리자에서 skin.html과 style.css에 코드를 추가/수정하는 간단한 방법으로 다양한 브라우저에서 다양한 웹폰트를 쓸 수 있는 서비스입니다.

2013년 3월부터 모빌리스 웹폰트가 유료화되었으며 제 블로그는 무료로 제공되는 구글 웹폰트로 설정을 바꾸었습니다.

무료 웹폰트 설정법을 찾아 제 블로그로 들어오셨다면 다음 포스팅을 참고하세요.

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

 

모빌리스 웹폰트를 지원하는 브라우저는 다음과 같습니다.

  • 인터넷 익스플로러 4.0 이상
  • 파이어폭스 3.5 이상
  • 크롬 4.0 이상
  • 사파리 3.1 이상
  • 오페라 10이상
  • 어도비 에어 2.5이상
  • 모바일 브라우저 (안드로이드, iOS, 블랙베리, 파이어 폭스 등) 지원

다양한 브라우저에서 같은 화면을 볼 수 있다는 것, 특히 모바일 브라우저에서도 같은 폰트를 볼 수 있다는 것은 매력적입니다.

특히 간단한 코드 추가/수정만으로 가능한 것도 큰 장점이라 할 수 있겠죠.

 

방법을 구구절절 설명하는 것보다는 제 블로그에 나눔고딕 폰트를 설정하는 방법을 따라가 보겠습니다.

 

모빌리스 웹폰트 서비스 페이지에서 [나눔고딕] 항목을 클릭합니다. 

웹폰트 Webfont EOT WOFF TTF 크로스 브라우징

 

[웹폰트 사용법] 항목에서 <link 부터 css' /> 항목까지 복사합니다.

웹폰트 Webfont EOT WOFF TTF 크로스 브라우징

 

 

티스토리 관리자의 HTML/CSS 항목을 클릭하고 [skin.html]의 <head>아래쪽에 복사한 코드를 붙여넣습니다.

복사한 코드에서 폰트 이름이 'NanumGothicWeb'인 것을 기억합니다.

웹폰트 Webfont EOT WOFF TTF 크로스 브라우징

 

 

[skin.html] 항목 아래쪽의 [style.css] 항목에서 [Dotum] 항목을 찾아 앞에 폰트이름인 'NanumGothicWeb'을 추가합니다. [Dotum] 항목은 꽤 여러곳에 자리잡고 있는데, 모두 바꾸거나, 바꿀 항목만 따로 찾아 바꿔도 됩니다.

웹폰트 Webfont EOT WOFF TTF 크로스 브라우징

그림을 보면 NanumGothicWeb 항목 앞에 'NanumGothic, 나눔고딕,'이 추가되어 있는데, 이것은 컴퓨터에 나눔고딕 폰트가 설치되어 있을 경우 컴퓨터의 폰트를 우선 사용하도록 하는 것입니다. 컴퓨터에 설치된 폰트를 쓸 경우 속도면에서 유리합니다.

 

다양한 웹폰트 사용 가능

모빌리스에서는 나눔글꼴 외에도 다양한 웹폰트를 서비스하고 있으므로 앞서 과정을 반복하여 필요한 폰트를 사용하면 됩니다. 저는 본문 글꼴은 나눔 고딕 폰트로, 이외의 글꼴은 나눔고딕 굵게(Bold) 폰트로 설정했는데요, 작은 글씨의 가독성은 나눔고딕 굵게가 더 좋아 보입니다.

 

단, 너무 많은 웹폰트를 설정할 경우 블로그 화면이 뜨는데 시간이 오래걸릴 수 있으므로 주의가 필요합니다.

웹폰트 Webfont EOT WOFF TTF 크로스 브라우징

 

  1. 이 포스팅은 EOT 형식의 웹폰트에 관한 포스팅이 아니므로 만들고 적용하는 방법은 따로 다루지 않습니다. 방법이 궁금한 분은 검색 엔진에서 'eot 폰트 변환'이라고 입력하면 도움되는 결과물을 확인할 수 있습니다. [본문으로]

이 글을 공유하기

댓글 :: 질문 댓글은 공개글로 달아주세요. 특별한 이유없는 비밀 댓글에는 답변하지 않습니다

Designed by JB FACTORY