★ 들어가는 글



얼마 전 블로그를 시작하면서 기본 폰트가 좀 식상한듯 하여 다른 블로그 처럼 폰트를 변경해보고자 하였다. 가장 기본적인 것이 되겠지만, 늘 그렇듯 검색을 했다. 방법이 나와있었다. 웹폰트를 서버로 올리고 그걸 폰트로 지정하여 사용하는 것이었다. 참고적으로 웹폰트는, 사용자의 PC에 폰트가 설치되지 않아도, 서버상에 존재하는 폰트를 이용하여 사용자에게 보여주는 것이다.

검색결과대로 내 블로그에 적용해봤으나 쉽게 되지 않았다. 대부분의 블로그에 의하면 웹폰트는 .eot 확장자를 가진 형태이다. 실패하였던 이유는 바로 .eot 파일은 익스플로러에서만 지원되기 때문이었다. 나는 크롬을 사용하기 때문에 변경되지 않은 폰트 그대로 보여진 것이었다. 이 사실도 검색을 통해 알게 된 사실이다.

그 후 다시 검색을 하였다. 그러니 다양한 브라우저를 지원하는 웹폰트 변경법이 있었다. 웹폰트를 서비스 해주는 곳을 이용하는 것이었다. 모빌리스의 웹폰트 서비스를 이용하는 것이다. 이 방법으로 이 블로그의 폰트를 변경하였다. 그래서 방법을 포스팅 하기로 한다.



★ 모빌리스 웹폰트 서비스



모빌리스라는 곳은 웹폰트를 올려놓고, 사용자들이 자유롭게 웹폰트를 이용할 수 있는 서비스를 지원하는 곳이다. 몇 가지 웹폰트를 서비스 하는데, 가장 큰 장점은 사용자의 브라우저 종류를 알아내어 동적으로 해당 브라우저를 지원하는 웹폰트를 로딩 해준다. 예를 들면, 익스플로러에서 블로그를 보게되면 .eot 파일로 폰트를 로딩하고, 크롬으로 보게되면 .woff 파일로 로딩하여 어떤 브라우저에서 블로그를 방문하더라도 아름다운 웹폰트로 페이지를 볼 수 있다. 모빌리스의 서비스를 이용하지 않으면 .eot, .woff, .ttf 파일등 다른 형태의 웹폰트를 서버에 올리고 이를 적당한 브라우저에서 선택적으로 로딩할 수 있도록 하는 작업이 필요하다.

모빌리스 웹폰트 서비스의 사용법은  http://api.mobilis.co.kr/webfonts/ 에서 볼 수 있고, 지원하는 브라우저는 다음과 같다.

지원 브라우저
  1. 마이크로소프트 인터넷 익스플로러 4.0 이상
  2. 모질라 파이어폭스 3.5 이상
  3. 구글 크롬 4.0 이상
  4. 애플 사파리 3.1 이상
  5. 오페라 10 이상
  6. 아도브 에어 2.5 이상
  7. 모바일 브라우저
    • 구글 안드로이드 OS 2.2 이상의 기본 웹브라우저
    • 애플 iOS 4.1 이상의 사파리 브라우저
    • 림 블랙베리 OS 6 이상의 기본 웹브라우저
    • 모질라 파이어폭스 모바일 9.0 이상


모빌리스에서 서비스하는 웹폰트



★ 모빌리스 웹폰트 서비스 블로그에 적용



웹폰트를 적용하는 것은 간단하다.  http://api.mobilis.co.kr/webfonts/ 에서도 참고할 수 있지만, 설명해 보기로 한다.

1. 우선 티스토리의 [HTML/CSS 편집] 메뉴에서 맨 아래로 이동하여 style.css편집창의 맨 위에 다음과 같이 넣는다.

@import url(http://api.mobilis.co.kr/webfonts/css/?fontface=xxxxxxxxxx);

" xxxxxxxxxx" 부분은 모비리스 홈페이지를 참고하여 가장 적당한 폰트명을 써주면 된다.

2. 추가하였으면 style.css편집창에서 'Gulim' 문자열을 찾아 에서 지정한 " xxxxxxxxxx" 로 모두 변경한다. 그리고 'Dotum' 문자열도 마찬가지로 변경한다.

위 두 작업을 하면 블로그의 폰트는 변경되어 있을 것이다. 본인은 기존 폰트 모두 필요없다고 판단, 특정 웹폰트로 일괄 변경하였다. 굳이 다른 폰트와 병행사용 하시고 싶으신 분들은, 검색을 통하여 css에 대해 조금 지식을 습득하면 쉽게 가능하다. 

이상 초간단 웹폰트 변경기 포스팅을 마친다.


저작자 표시 비영리 변경 금지
신고
Posted by Life 스토리