구글블로그 폰트 설정하는 방법 - 블로그 스팟 나눔고딕 폰트로 설정하기

i토와i
It - Mobile/블로그 Tip
2015. 2. 11. 03:23

구글블로그 폰트 설정하는 방법 - 블로그 스팟 나눔고딕 폰트로 설정하기

외국에서야 구글 블로그가 많이 활성화가 되어 있지만, 우리나라에서는 구글 블로그, 그러니까 ID.blogspot.kr 의 주소로 이루어지는 블로그 스팟의 정보가 너무 없는 것이 사실이지요. 저도 구글 블로그를 하나 운영하고 있지만, 정말 꾸미기부터 시작해서.. 하나 하나 어려운 것이 너무나도 많은 것이 사실입니다.

그래서..

블로그의 운영 목적이나 활용, 방문자수같은 것들에 관계 없이.. 구글 블로그에 대해서 제가 정보를 얻은 만큼 공유를 해볼까 합니다.

순서대로 차근 차근 해 나가면 좋겠는데.. 일단 지금 당장 생각나는 부분들에 대해서 포스팅 하지 않으면 금방 까먹어 버리는 성격인 탓에.. 오늘은 폰트를 설정하는 방법에 대해서 이야기를 해볼까 합니다.

구글 블로그 폰트 설정하기

구글 블로그도 의외로 티스토리처럼 html에 직접 접근을 할 수 있어서.. 상당히 편리한 점이 있습니다. 물론 기존의 포털에서 제공하는 블로그들과는 약간의 차이가 있기 때문에 불편함이 있지만.. 하나 하나 사용하다보면 은근히 쉽답니다.^^;;

구글 블로그에 폰트를 설정하기 위해서는 템플릿의 html를 수정해야 합니다.

일단 관리자 화면으로 가보지요.^^;;

템플릿을 누르면 현재의 디자인이 표시가 되고, 아래 맞춤 설정과 HTML 편집이 있습니다.

그럼 다시 HTML 편집을 눌러 주세요.

그러면 이런 HTML 화면이 뜨지요.

여기서 4~5번 라인에 <head> 라는 태그가 있을꺼에요. 요기에 아래와 같은 스크립트를 추가합니다.

<script src='http://www.google.com/jsapi'/>
<script>
google.load( "webfont", "1" );
google.setOnLoadCallback(function() {
WebFont.load({ custom: {
families: [ "Nanum Gothic" ],
urls: [ "http://fonts.googleapis.com/earlyaccess/nanumgothic.css" ]
}});
});
</script>

요 CSS의 의미는.. 쉽게 말해서 구글 웹폰트 사이트에서 나눔고딕 폰트를 가지고 와라 까지의 내용이라고 보시면 되요.

헤드 삽입.txt

위 파일이 코드입니다.

그리고 나서 Ctrl+F 버튼을 눌러 주시면 오른쪽 위에 찾기 버튼이나옵니다.

그럼 여기서 Page Text를 찾아보세요.

그 아래 라인에 <Variable xxxxxxxx~~~~~, serif:/> 라는 태그가 보이실껍니다.

그 부분을 다음과 같이 고쳐주는 거지요. 요건 추가가 아니라 수정입니다. 덮어 쓰시는 거에요.

<Variable name="body.font" description="Font" type="font"
default="normal normal 12px NanumGothic, 'Malgun Gothic', UnDotum, 'Palatino Linotype', Palatino, Georgia, Utopia, serif" value="normal normal 12px Nanum Gothic, 'Malgun Gothic', UnDotum, 'Palatino Linotype', Palatino, Georgia, Utopia, serif"/>

요 태그를 덮어쓰시면 됩니다. 요 것의 의미는.. 쉽게 말해서 위에서 불러온 나눔고딕 글씨체를 본문에 적용해라.. 뭐 이정도 라고 생각을 하시면 됩니다. 이렇게 하시고 템플릿 저장을 눌러주시면 폰트가 적용이 되신걸 확인할 수 있답니다.

본문삽입.txt

위 파일이 본문 삽입 코드입니다.

그런데.. 나눔 고딕이 아니라 다른 글씨체를 적용하고 싶다.. 라는 분들이 계시겠지요?

구글에서는 자체적으로 웹폰트를 적용할 수 있도록 주소를 함께 제공하고 있는데요, 구글 블로그 뿐만 아니라 티스토리를 비롯한 html, css 접근이 가능한 블로그라면 모두 사용이 가능한 오픈소스랍니다.

■ 구글 폰트 액세스 URL

http://www.google.com/fonts/earlyaccess

들어가셔서 Ctrl+F를 누르시고 korea 라고 검색을 하시면 한국어가 지원이 가능한 폰트들을 확인해 보실 수 있습니다.

korea를 검색해서 나온 화면중에 나눔고딕을 찾아가 봤어요. 그런데.. 이걸 어떻게 써먹냐.. 노란 네모박스가 두 개가 있잖아요. 하나는 주소, 하나는 파일명 정도로 생각하시면 이해하기 쉬우실꺼에요.

일단 주소는.. 아까 <head> 아래쪽에 붙여 넣었던 코드가 있지요? 여기에서 빨간색으로 표시해 드린 부분이 있을껍니다. 요 부분을 수정해 주시면 됩니다.

그리고.. 아래 Nanum Gothic 이라는 글씨가 굵게 되어 있지요? 요 부분을 복사해서 <head> 아래 코드에 빨간색으로 표시된 부분을 수정해 주시면 되는 거구요, 중간에 본문에 적용시킬 수 있도록 하는 코드에도 빨간색으로 표시된 부분을 수정해 주시고 템플릿 저장을 눌러 주시면 폰트가 변해 있는걸 확인할 수 있답니다.^^;;

구글 블로그가 우리가 평소에 사용하던 블로그와는 다르게 카테고리도 없고, 정렬 방법도 틀리고 해서 참 어려움이 있는데요, 다음에는 또 다른 구글 블로그 팁을 함께 가지고 올 수 있도록 할께요~^^;;