감성공간

티스토리 나눔고딕 웹폰트 변경 하기

2015. 11. 21. 23:09 - 행복천사

폰트를 변경하다가 나눔고딕 웹폰트를 손쉽게 적용할 수 있는 방법이 있어서 포스팅합니다.


사실 웹폰트는 해당 파일만 임포트시켜서 쓰면 되는데요. 중요한건 그 주소를 CSS에 추가해주는 겁니다. 마침 티스토리 나눔고딕 웹폰트는 구글에서 서비스를 하고 있어서 손쉽게 추가를 해줄 수 있었습니다.



웹폰트란?

폰트를 블로그에 등록시켜 놓고 글을 읽을 때마다 로드를 하게 되면 폰트 용량만큼 트래픽이 발생하게 되는데요. 트래픽이 쌓이다보면 부가가 걸려서 블로그가 제대로 열리지 않는 경우가 생깁니다.


티스토리같이 포털에서 제공하는 서비스의 경우 트래픽을 따로관리를 하기 때문에 우리가 걱정없이 첨부파일도 올려서 보고 글을 쓰고 있는데 개인 서버에서 서비스를 시작하면 방문객이 늘어나는것은 곧 호스팅 비용의 상승을 의미하는 것이기 때문에 용량에 엄청 민감해질 수 밖에 없습니다.


그래서 구글에서 서비스하는 폰트를 필요할때 빌려쓰는 방법으로 import를 쓰는 것입니다. 이런 방식의 단점은 서비스하는 쪽에 장애가 생겨 사용을 못하게 될때에는 폰트가 영향을 받아서 제대로 출력이 안되는 점이 발생됩니다.



 


웹폰트 추가하기

나눔고딕을 추가하려면 아래 주소만 타이핑해서 style.css 넣어주시면 됩니다. 위치는 상관이 없지만 파일임포트의 경우 되도록이면 제일 상단에 어떤파일이 로드되는지 확인할 수 있게 위쪽에 기재하시는게 좋으실 것 같습니다.


@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);


티스토리 나눔고딕 웹폰트 추가하였으니 이제 폰트를 적용만 하면 사용하실 수가 있습니다.

body태그나 혹은 font로 css파일을 검색하셔서 font-family에 관련된 문구를 전부 수정해주시기 바랍니다.


양식은 아래와 같습니다.


font-family:NanumGothic, "Malgun Gothic", "맑은 고딕", Verdana, Tahoma, Arial !important;


나눔고딕이 없으면 맑은고딕, Verdana, Tahoma, Arial 순으로 폰트를 적용하게됩니다. 여기까지 티스토리 나눔고딕 웹폰트 변경하는 방법을 알아보았습니다. 유용한 정보가 되셨으면 합니다.