티스토리 블로그 웹폰트 적용하기 - 구글 웹폰트 서비스

새터의 태양 블로그는 그동안 모빌리스에서 제공하는 나눔고딕 웹폰트를 적용하고 있었는데요.

티스토리에 웹폰트 적용하기 [초보자 가이드] http://sunstar2.tistory.com/437

그런데 언제 부턴가 인터넷 익스플로러(IE 10)에서는 적용이 되어 보여 지는데 크롬에서는 적용이 안 되더군요.

원인을 찾던 중 모빌리스 홈 페이지에 접속해 보니 사이트가 개편이 되고 무료 사용자에게도 제약을 두고 있었습니다.

원인이 모빌리스 웹폰트 적용에 있었는지는 모르나, 구글 웹폰트로 바꾸고 보니 잘 적용된 것 같습니다.

확인 브라우저 : IE 10,Chrome

 

티스토리에 적용 방법은 모빌리스와 동일하게 적용하면 되는데, 일단 구글 웹폰트 서비스 페이지에 접속을 합니다.

구글 웹폰트 서비스 http://www.google.com/fonts/earlyaccess

페이지 접속 후 찾기 기능(Ctrl + F)을 누르고 Nanum Gothic 을 입력, 업 다운 버튼으로 나눔 고딕을 찾습니다.

구글 웹폰트에는 나눔 글꼴들을 서비스하고 있는데 얼마전 네이버에서 한글날을 기념해 배포 중인 나눔바른고딕은 아직 없군요.

아무튼 이 곳에서 자신이 원하는 폰트를 선택하면 되는데요.캡쳐 이미지대로 나눔 고딕의 링크 코드를 드래그 복사합니다.

코드를 복사했으면 블로그 관리자 모드로 들어 와 HTML/CSS 편집 -> style.css 창 맨 위에 붙여넣기(Ctrl +V)합니다.

이때 모빌리스 웹폰트를 적용 중인 분은 모빌리스 코드는 과감하게 삭제해 주세요.

그리고 다시 찾기 기능(Ctrl + F)을 키고 font-family라고 입력하고 업 다운 버튼으로 폰트를 찾습니다.

스킨마다 다르지만 보통 Dotum이나 돋움으로 표시되어 있을 겁니다.이 폰트 앞에 Nanum Gothic, 을 써 주세요.

웹폰트가 적용되려면 font-family의 맨 앞에 Nanum Gothic이 표기되어 있어야 하구요.

나눔 고딕 웹폰트를 본문에만 적용하려면 body 부분 font-family: Nanum Gothic,으로 대부분 스킨에서 적용되는데

블로그 페이지 전체에 적용하려면 업 다운 버튼을 눌러 font-family를 찾아 일일히 Nanum Gothic,을 적어 줘야 합니다.

Nanum Gothic, 을 입력하면서 중간 중간 미리보기하는 것 잊지마시고, 웹폰트 적용이 잘되었으면 저장 버튼으로 스킨이 적용됩니다.

모빌리스 웹폰트를 사용하던 분은  font-family로 폰트를 찾는 과정에서 NanumGothicWeb,으로 표기되어 있을 겁니다.

구글 웹폰트 적용을 위해 NanumGothicWeb에서 뒤 Web은 지우고 Nanum 띠고 Gothic,으로 수정하면 적용이 됩니다.

빠르고 쉽게 수정하는 팁,,,

Nanum Gothic, 을 복사한 후 NanumGothicWeb, 을 드래그로 파랗게 반전 시킨 다음 Ctrl+V(붙여넣기)하면 빠르게 수정 할

수 있습니다

이상 구글 웹폰트 적용에 대해 몇 글자 적어 봤는데요.

아마도 누구나 쉽게 적용할 수 있는 팁이라 생각됩니다.

읽어 주셔서 감사합니다~^^*