테크/블로그

구글 블로거(블로그스팟) 한글 웹폰트 나눔고딕 적용하는 방법

유별남 2018. 1. 31. 20:54

새롭게 구글 블로거(블로그스팟)을 운영해보며 어렵다는 사실을 새삼 깨닫는다. 이제는 조금은 익숙해진 티스토리와 달라 폰트를 변경하는 것조차 어려움을 겪는다. 블로그스팟에서 기본적으로 제공되는 스킨이나 무료 템플릿 사이트에서 내려받은 스킨 역시 한글폰트를 제공하고 있지 않아 가독성을 위해서는 폰트변경 과정이 필요하다. 이리저리 찾아보다 몇몇 구글 블로거분들이 올려놓으신 방법을 공유해보고자 한다.





구글 블로그(블로그스팟)

한글 웹폰트(나눔고딕) 적용하는 방법



1. [블로그 관리] - [테마] - [HTML 편집] 화면으로 들어간다.




2. HTML 편집창의 head 영역에 아래의 코드를 복사/붙여넣기 한다. 코트는 아래의 텍스트 파일을 내려받으시면 된다.


<link rel='stylesheet'  href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css'/>


나눔고딕 적용하기(1).txt


(▲[블로그 관리] - [테마] - [HTML 편집] 화면)


3. '테마 저장' 버튼을 누른 후, '뒤로'버튼을 눌러 편집창에서 빠져 나온다.


4. [테마] - [맞춤설정] - [고급] - [CSS 추가] 화면으로 들어간다. 그 이후, 맞춤 CSS 추가 영역에 다음 코드를 복사/붙여넣기 하고 '블로그에 적용'을 클릭한다.


body, h1, h2, h3, h4, a, div, input, p, span, td, label, select, textarea, iframe {

    font-family: 'Nanum Gothic';

}


.post-body {

    font-family: 'Nanum Gothic';

}

.Header .description, .Header h1 {

    font-family: 'Nanum Gothic';

}

.main-inner .widget h2.date-header span {

    font-family: 'Nanum Gothic';

}

h3.post-title {

    font-family: 'Nanum Gothic';

}

h3.post-title a {

    font-family: 'Nanum Gothic';

}

.sidebar .widget {

    font-family: 'Nanum Gothic';

}


나눔고딕 적용하기(2).txt



(▲[블로그 관리] - [테마] - [맞춤설정] - [고급] - [CSS 추가])



위의 과정을 완료했다면 아마 정상적으로 나눔고딕 폰트가 적용되었을 것이라 생각한다.


만약 폰트가 정상적으로 적용되지 않았다면,

[HTML편집]에서 page text 영역에서 아래 코드를 찾아 'Nanum Gothic'을 나눔고딕 글꼴을 추가해주도록 하자.


<Variable name="body.font" description="Font" type="font"

         default="normal normal 12px 'Nanum Gothic', 'Malgun Gothic', UnDotum, 'Palatino Linotype', Palatino, Georgia, Utopia, serif" value="normal normal 15px 'Nanum Gothic', 'Malgun Gothic', UnDotum, 'Palatino Linotype', Palatino, Georgia, Utopia, serif"/>


정상적으로 나눔고딕 폰트가 적용된 모습을 확인할 수 있으리라 생각한다.

아무쪼록 도움이 되셨길 바라며, 멋진 블로그 운영하시길 기원한다.