[블로그 꾸미기] 내 블로그에 웹폰트 적용

 블로그를 점점 꾸미고 싶은 게 블로그를 운영하는 사람의 마음일 것입니다. 하지만 아무것도 모른 상태로 하나하나 수정하기란 쉬운것이 아닙니다. 특히 처음 접하는 분들이라면 복잡한 메뉴들과 기능 때문에 곤란함을 격은 분들이 많으실 겁니다. 그래서 이번에는 간단하게 폰트를 적용하는 방법을 알아보겠습니다. 간단하고 업로드만 하면 되기때문에 적용하기가 쉽죠.

웹폰트?

웹폰트는 웹에서 사용할수있는 폰트를 말합니다. 블로그뿐만 아니라각종 홈페이지 에서 사용이 가능한 폰트입니다. 확장자는 eot 로 IE 독점입니다. 덕분에? 파이어폭스, 사파리, 구글크롬등에서는 적용할수없죠. 하지만 최근에 파이어폭스는 ttf 를 직접 끌고 올수가 있습니다만 미비 합니다.


이렇게 적용가능한게 웹폰트입니다. 아마 대부분 이쯤이면 아시겠지만 혹시 뭔지 모르겠다? 하시는 분은 검색을 잠깐 짬내서 해보시면 정확하게 많은 곳에 나와있습니다.

자! 그럼 폰트가 있어야겠죠?

폰트는 eot 확장자를 갖고있어야 합니다. 하지만 웹폰트는 유료로 판매를 합니다. 그렇지만 무료폰트도 있고 ttf 같은경우 eot 로 변환을 할수도 있습니다. 변환 방법도 간단합니다. 이번에는 적용 하는 방법을 알아보는 것이기때문에 설명이 잘되어있는 링크를 남깁니다.

http://www.soyafont.com/gnu/bbs/board.php?bo_table=download&wr_id=14

위 사이트에 자세하게 잘 나와있습니다. 변환 방법은 참고하세요.


저는 일단 설명을 위해 "나눔고딕" 폰트를 준비했습니다. 나눔고딕 폰트는 네이버에서 배포하는 나눔 폰트입니다. 많은곳의 블로그에서 가독성도 좋기때문에 많이들 사용하고 있습니다.

나눔고딕 다운로드

다시한번 말씀드리지만 ttf 확장자를 가진 폰트는 웹폰트 형식 eot 로 변경해주셔야 합니다.

@font-face{
font-family:ngeoteto, 나눔고딕; src:url(나눔고딕.eot);
}

이런식으로 불러워야 합니다. @font-face 는 그 폰트를 화면에 불러오게 됩니다. 그다음에는 아래와같이 적어주시면 되겠습니다.

body {
font-family:ngeoteto, 나눔고딕;
}

이렇게 되면 body에 폰트를 적용하게됩니다. 지금은 예를 들어 전체적인 부분이 body 이기때문에 body 이지만 각 부분의 이름을 적어주시면 적용 가능합니다. 예를들어 div 라고 한다면 <div class="name"> 라는 name가 저곳에 들어갈수있다는 말이 됩니다.

.name {
font-family:ngeoteto, 나눔고딕;
}

이런식으로 말이죠. 복수 입력은 어떻게 하면 될까요? 블로그 태그 입력과 동일합니다.

.body, .name, .name2, .name3

이런식으로 됩니다. 정말 쉽죠? 이런식으로 이곳에 넣어주시면 됩니다.

꾸미기 >> 템블릿 디자이너 >> 고급 >> CSS

 블로거에는 친절하게 따로 CSS 를 입력할수있는 공간이 있습니다. 그게 위에 입력란입니다. 위에 설명한 @font-face 부분과 font-family 부분을 같이 입력합니다. 입력을 해주면 내 블로그에 홈페이지에 폰트가 적용된것을 알수있습니다.

하지만

 위에 말했듯이 eot 는 ie 독점이라고 보시면 됩니다. 즉 인터넷익스플러에서만 볼수있다는거죠. 그점 참고하시고 한번 이쁘게 꾸며보세요:D