웹폰트로 쉽게 블로그 폰트 설정하기 ! [모빌리스 웹폰트를 이용, 깔끔하게]
얼마 전에 웹폰트라는 것을 알게 되었습니다. 저는 블로그에 나눔고딕 폰트를 적용하기 위해서 네이버에 '티스토리 나눔고딕'이라고 검색하여 네이버 나눔고딕 폰트를 블로그에 적용한 적이 있습니다. 그 당시 폰트 적용을 위해서 폰트 파일인 .eot 파일과 HTML, css 수정을 통해서 적용했습니다.
하지만 단점이 있었습니다. 그 폰트를 설치하지 않은 이용자에게는 폰트가 정확하게 나타나지 않는다는 단점이었습니다. 폰트가 컴퓨터 내에 설치되어 있다면 정확하게 보이지만, 설치되어 있지 않다면 어설프게 보입니다. 뭔가 다른 폰트를 보는 듯한 느낌을 받았습니다.
다 적용 후에는 정말 놀라운 결과를 보여주었습니다. 컴퓨터는 물론, 폰트 파일이 설치되어 있지 않은 컴퓨터와 모바일에서까지 정확하게 폰트가 보이는 것이었습니다. 이 서비스는 현재 베타이며, 정식까지 유지할 수 있었으면 하는 마음에 포스팅 해봅니다. 정식 이후에 이 글을 읽으시는 분들도 있을 수 있겠군요.
#1 모빌리스(Mobilis) 웹폰트 살펴보기
모빌리스 웹폰트 선택을 위해 모빌리스 페이지인 '이곳'을 참고하며 아래의 설명을 따라가세요.
제가 위에 건 링크로 이동하면 뜨는 모빌리스 폰트 페이지 입니다.
페이지는 위쪽에 폰트에 대한 소개를, 아래쪽에 폰트가 나열되어 있습니다.
우선 아래쪽을 보도록 하겠습니다.
11가지가 넘는 폰트가 존재하며, 일부 폰트는 미리보기가 가능하게끔 배열되어 있습니다.
우선 자신이 블로그에 적용하고 싶은 폰트를 선택해 줍니다.
인기있는 폰트는 나눔고딕과 렉시새봄 정도가 있겠습니다. 아직 렉시새봄을 사용하시는 분은 많이 보지 못했습니다. 제 댓글부분에 적용되어 있는 폰트가 렉시새봄 입니다. (적용된 렉시새봄 폰트를 보시려면 아무곳이나 더블클릭 하세요. 제 블로그의 최하단으로 이동합니다. 다시 더블클릭 하면 블로그의 최상단으로 이동하며, 현재의 스크롤 위치는 저장되지 않으니 외우세요 ! ㅠ ㅠ)
임의로 나눔고딕 폰트를 선택해 보았습니다. 나눔고딕 폰트는 네이버 나눔고딕 페이지인 '이곳'을 통해서 자신이 입력한 내용을 나눔글꼴로 미리보기 할 수 있습니다.
위와 같이 폰트를 입력하고, 그 폰트를 미리보기할 수 있습니다.
네이버는 사용자 맞춤 면에서는 최고인 것 같습니다. 높은 점유율을 차지한 것도 이 부분의 영향이 지대하리라 생각합니다. 는 좀 새나갔네요.
#2 모빌리스(Mobilis) 웹폰트 블로그에 적용하기
모빌리스 나눔고딕 페이지로 이동하시려면 '이곳'을 클릭하세요. 위의 링크에서 나눔고딕을 선택하셔도 해당 페이지로 이동합니다.
티스토리 기준 [관리 → HTML/CSS 편집 → skin.html] 부분에 적용해야 할 부분입니다.
해당 코드는 <head>와 </head> 사이에 넣어야 하며, 제 블로그에 적용한 스크린 샷은 다음과 같습니다.
잘 보이게끔 다른 코드는 모자이크 처리했습니다. 웹폰트는 스크린 샷과 같이 <head>와 </head>사이의 어느곳에든 적용할 수 있습니다.
폰트를 너무 많이 블로그에 적용하면 다운로드 할 파일이 커지므로 블로그의 로딩이 늦어질 수 있습니다. (웹폰트는 블로그 외의 홈페이지 등의 사이트에도 적용 가능합니다.)
원하는 웹폰트 코드를 <head>와 </head>사이에 적용한 후, 원하는 폰트 페이지의 css 부분을 보세요.
style.css의 'font-family' 부분에 원하는 폰트명을 입력해 주시면 됩니다. 원하는 폰트명은 모빌리스 사이트에서 복사하시면 됩니다.
제 블로그에 적용한 스크린 샷을 보도록 하겠습니다.
이렇게 폰트명이 나열되어 있는 부분을 볼 수 있습니다. 이 부분들의 가장 앞에 NanumGothicWeb(나눔고딕이 아닌 경우에는 원하는 폰트명)를 적어주시면 됩니다.
두가지 이상의 폰트를 사용하시려면 style.css 부분의 원하는 부분에만 수정을 해주어야 하며, 폰트 크기도 지정할 수 있으므로 블로그를 좀 더 보기좋게 만들 수 있을 것입니다.
모빌리스 웹폰트가 블로그를 운영하고 있는 여러분들께 도움이 되길 바랍니다.
'팁 > 블로그' 카테고리의 다른 글
| 다음 검색 결과에 '많이본글' 탭이 생겨났습니다. (0) | 2012.10.27 |
|---|---|
| 현재 접속자 수 실시간으로 확인 [who's.amung.us를 이용한] (0) | 2012.09.20 |
| 블로그 지수 확인 방법 [지수에 대한 개인적인 견해와 측정] (2) | 2012.08.31 |
| 블로그 SEO 지수 확인 사이트 [SEO 지수는 몇 점일까 ?] (2) | 2012.08.21 |
