구글 블로그 한글 폰트 설정하기

방법1. 테마 디자이너로 글꼴 변경하기
방법2. 글 작성할 때, 한글 폰트 설정하기
방법3 (추천). 글 작성할 때, HTML 모드에서 한글 폰트 설정하기
Blogger 숙련자용

자신의 구글 블로그에서 사용하는 언어에 잘 맞는 폰트를 설정하면 눈이 편안하고 글이 잘 읽히겠죠? 한국어 블로그라면 한글 폰트를 설정하는게 맞지 않을까요?

그리고 어떤 폰트를 사용하느냐에 따라 블로그 전체 분위기가 달라지기도 합니다.

지금 현재 읽고 있는 글의 한글 폰트(글꼴·서체)는 Google이 디자인한 'Noto Serif KR'입니다. 한글 폰트를 설정하는 방법을 5가지로 정리했습니다. 자신에게 맞는 방법을 사용하면 됩니다.

구글 블로그 한글 폰트 설정

방법1. 테마 디자이너로 글꼴 변경하기

'Blogger 대시보드 > 테마 > 맞춤설정 > 고급'에서 글꼴을 수정할 수 있습니다.

하지만 현재는 '한글 폰트'라고 할 만한 폰트는 마땅히 보이지 않습니다.

방법2. 글 작성할 때, 한글 폰트 설정하기

일반 모드에서 상단의 '글꼴 유형 > 더 많은 글꼴 추가'로 한글 폰트를 설정할 수 있습니다.

직접 해 보면 어렵지 않게 사용할 수 있는 기능입니다.

방법3 (추천). 글 작성할 때, HTML 모드에서 한글 폰트 설정하기

아래 YouTube 동영상을 확인하세요.

[샘플 코드]

<style>
#main .post-body {
  font-size: 18px;
}
</style>

[설명]

동영상에서는 구글 폰트 또는 눈누 상업용 무료한글폰트 사이트를 사용해서 한글 폰트를 설정하고 있습니다.
샘플 코드에서 '#main .post-body'는 글의 본문을 가리킵니다.
테마 Contempo, Soho, Emporio, Notable에서 테스트를 완료하였습니다.
이 블로그에서는 이 방법을 사용하고 있습니다.
조금의 수작업이 필요하고 아주 좋은 방법은 아니지만, '방법2'의 단점(실제로는 전체 페이지 로딩 속도에 영향을 줌, 구글 폰트에만 한정 됨)을 보완하기 위한 방법입니다.

이건 알아두자

예를 들어 어떤 블로그의 폰트(글꼴·서체)가

1순위로 '애플 SD 산돌고딕 Neo'
2순위로 '맑은 고딕'
3순위로 '돋움'

으로 설정되어 있다고 가정합니다.

그 블로그에 윈도우(Windows) 사용자가 웹 브라우저를 통해서 접속합니다. 그러면 윈도우 사용자의 브라우저에는 폰트가 '맑은 고딕'인 블로그가 보이게 됩니다. 왜냐하면 윈도우에는 1순위인 '애플 SD 산돌고딕 Neo' 폰트가 (기본적으로) 없기 때문입니다. 만약 블로그 방문자가 맥(Mac) 사용자라면 폰트가 '애플 SD 산돌고딕 Neo'인 블로그가 보이게 됩니다. 우선순위대로 설정된 폰트들이 어떻게 사용되는지 대충 감이 잡히시나요?

모든 운영 체제(OS)에 기본적으로 내장되어 있는 폰트(글꼴·서체)가 같으면 좋겠지만 다릅니다. 그래서 여러 개의 폰트를 우선순위대로 지정해 두는 것입니다. 이렇게 블로그 방문자의 컴퓨터에 있는 폰트를 설정하는 기본적인 방법이 있는가 하면,

블로그 방문자의 컴퓨터와 상관없이 자신의 블로그에 일률적으로 특정 폰트를 적용할 수 있는 웹폰트(예. 구글 폰트)를 설정하는 방법도 있습니다.

무료 웹폰트라도 은근히 다양하고 좋기 때문에 선택의 폭이 넓다는 장점이 있지만 단점도 있는데, 먼저 웹폰트가 어떻게 블로그에 적용되는지 간단히 설명하겠습니다.

예를 들어 어떤 블로그에 'Sunflower'라는 웹폰트가 설정되어 있다고 가정합니다.

그 블로그에 방문자가 처음 접속할 때, 방문자의 웹 브라우저는 자동으로 'Sunflower' 웹폰트 파일을 다운로드하고 나서 그 파일을 사용해서 폰트가 'Sunflower'인 블로그를 방문자에게 보여줍니다.

처음 접속할 때는 웹폰트 파일을 다운로드하는 과정이 반드시 동반됩니다. 웹폰트 파일의 크기(용량)는 제각각인데 간혹 파일의 용량이 큰 경우에는 웹 페이지가 브라우저에서 보여질 때 조금 부자연스럽게 시간차를 두고 해당 폰트가 표현될 수도 있습니다. 단점은 아시겠죠? 하지만 다운로드 과정은 처음 한 번뿐이고 자동이고 대부분 순식간에 끝나 버리기 때문에 애써 신경써서 들여다보는 사람이 아니라면 불편함이 없습니다.

방법4. 블로그 방문자의 컴퓨터에 있는 폰트를 설정

아래 CSS 코드를 복사해서 'Blogger 대시보드 > 테마 > 맞춤설정 > 고급 > CSS 추가'에 붙여넣기 하면 됩니다.

* {
  font-family: "맑은 고딕", "Malgun Gothic", "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", sans-serif !important
}

※위 코드를 자신의 블로그에 맞게 변경하려면 아래 설명을 참고하세요.

「"맑은 고딕", "Malgun Gothic"」부분은 윈도우(Windows)용입니다. 한글 명칭을 인식하지 못하는 경우에 대비하여 영어 명칭도 함께 넣습니다. 그리고 윈도우는 보통

굴림(Gulim)
굴림체(GulimChe)
궁서(Gungsuh)
궁서체(GungsuhChe)
돋움(Dotum)
돋움체(DotumChe)
맑은 고딕(Malgun Gothic)
바탕(Batang)
바탕체(BatangChe)

글꼴을 지원합니다.

참고로 '명칭 + 체'인 글꼴들은 고정폭이라는 의미입니다. 다시 말해 모든 각 글자가 같은 폭(가로 길이)을 가진다는 것입니다. 특별한 이유가 없다면 '체'가 붙지 않은 것을 사용하는 것이 보편적이고 가독성이 높습니다.

「"애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo"」부분은 맥(Mac)용입니다.

「sans-serif」는 앞 쪽에 지정한 폰트들을 모두 지원하지 않을 만일의 경우에 대비하여 최후의 보루 같은 느낌으로 넣어두는 것입니다.

「*」과 「!important」는 블로그의 모든 부분(요소)에 동일한 폰트를 간단하게 적용하기 위한 코드입니다.

방법5. 웹폰트(예. 구글 폰트)를 설정

예를 들어 구글 폰트에 있는 'Sunflower'를 자신의 블로그에 적용하려면,

우선 Google Fonts(https://fonts.google.com/)에 접속합니다.

그리고 아래의 동영상을 참고하세요.

동영상 끝 부분에서 「<link ...(생략)>」를 아래와 같이 수정 후, 'Blogger 대시보드 > 테마 > HTML 편집'으로 이동해서 수정한 코드를 <head>와 </head> 사이에 넣어 줍니다. 고민된다면 </head> 바로 위에 넣고 저장합니다.

[수정 전]

 <link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300&display=swap" rel="stylesheet">

[수정 사항]

①" → '

②& → &

③> → />

[수정 후]

 <link href='https://fonts.googleapis.com/css2?family=Sunflower:wght@300&amp;display=swap' rel='stylesheet'/>

[HTML 편집시, 확인 사항]

'Blogger 대시보드 > 테마 > 백업' 기능을 이용해서 xml 파일을 사전에 다운로드해 두고, 변경 후에 다시 다운로드합니다. 그리고 변경 전과 후를 비교해서 실제로 자신이 의도한 부분만 변경되었는 지를 확인하세요.

동영상 끝 부분에서 「font-family: ...(생략);」를 아래와 같이 수정 후, 'Blogger 대시보드 > 테마 > 맞춤설정 > 고급 > CSS 추가'로 이동해서 수정한 코드를 넣어 줍니다.