구글 블로그 폰트 변경, 어떻게 해야 할까요? (초보자도 따라 할 수 있는 완벽 가이드)
이번에도 역시나 불편하고 불친절한 구글 블로그를 원망하면서 시작해봅니다. 구글 블로그는 완전 불편하지만, 완전 편리하게도 HTML 편집이 가능해 내 마음대로 원하는 것을 구현할 수 있다는 점이 매력입니다. 그리고 티스토리처럼 사사건건 간섭하고 광고를 갖다 붙이는 일은 없죠.
조금의 불편함을 인내할 마음만 있다면 구글 블로그도 충분히 가치가 있습니다. 이번 시간에는 블로그의 폰트를 변경하는 방법에 대해서 자세히 설명해 드릴게요. 물론 저는 전문가가 아님을 미리 알려드리며, 저 역시 배워가면서 알려드리는 것이니 혹시 잘못된 점이 있다면 댓글로 알려주시면 감사하겠습니다.
폰트 변경하는 방법 1: 테마의 기본 기능 활용 (간편하지만 제한적)
폰트를 변경하는 첫 번째 방법은 테마의 기본 기능을 이용하는 것입니다. 이 방법은 크게 어려울 것이 없고 간단한 설정만으로 폰트를 변경해볼 수 있는 장점이 있습니다. 하지만 테마에 따라서 폰트를 변경하는 메뉴가 없는 경우와, 폰트를 변경할 수 있어도 그 폰트들이 내 마음에 안 드는 단점이 있습니다. 만약 내가 딱 원하는 폰트를 찾는다면 이 방법이 아닌 두 번째 방법을 살펴보시길 추천드립니다.
'글꼴(Fonts)' 메뉴에 들어가니 아래 캡처 이미지처럼 각각의 위치에 해당하는 폰트를 내가 직접 선택할 수 있습니다.
폰트 리스트에는 여러 가지 폰트가 쭉 나열됩니다. 그러나! 대부분의 구글 블로그 테마가 외국에서 만들어지다 보니 영어로 된 폰트만 쭉 나열되는 단점이 있어요. 그래서 이것저것 바꿔봐도 딱 내 마음에 드는 폰트를 적용할 수 없을지도 모르는 거죠.
그래서 원하는 폰트를 적용하지 못하면 무용지물이 되는 거라 이 방법은 그다지 추천해 드리지 않아요. 물론 사용자에 따라서는 원하는 폰트가 있을 수도 있고 영문 폰트를 찾고 계실 수도 있으니, 그건 자신의 상황에 맞게 활용해보면 좋을 것 같습니다.
폰트 변경하는 방법 2: 구글 폰트(Google Fonts)를 이용한 커스터마이징 (추천!)
구글 폰트(Google Fonts)는 폰트를 웹사이트나 블로그에 링크를 걸어서 사용할 수 있는 코드를 제공해주고, 폰트를 다운로드받을 수 있게 지원해주는 사이트입니다. 이 서비스를 이용해 구글 폰트에 있는 폰트를 내 블로그에 링크로 연결하여 원하는 폰트로 바꿔줄 수 있는 방법입니다. 간단하고 원하는 폰트를 직접 골라 적용할 수 있어서 만족도가 높습니다. 먼저 폰트를 살펴보려면 아래 링크 버튼을 눌러주세요.
구글 폰트에는 이런 폰트가 있어요
구글 폰트에는 한글 폰트도 꽤나 많이 보입니다. 이 폰트들은 모두 사용이 허가되었으므로, 이용하는 데 부담 없이 구글에서 제공하는 링크를 받아서 사용할 수 있어요.
 |
| (구글 폰트 웹사이트의 다양한 폰트 목록 캡처) |
저는 이 폰트를 적용할 거예요: Noto Sans KR
구글 폰트 중 저는 가장 기본적이지만 아주 깔끔하고 선명하게 보이는 고딕체를 선호해서 "Noto Sans KR" 폰트를 선택하였습니다. 지금 이 블로그에 보여지는 폰트랍니다. 이 폰트를 검색에서 찾아 'Get Font' 버튼을 누르면 폰트를 링크해서 가져갈 수 있는 페이지를 만날 수 있습니다. 아래 캡처 이미지를 참고해보세요.
 |
| (구글 폰트 웹사이트의 Noto Sans KR 폰트 선택 후(두불 클릭을 함) 'Get Font' 클릭 화면) |
HTML 코드 적용 방법
'웹', '안드로이드', 'iOS', 'Flutter' 등의 메뉴가 있지만, 우리는 블로그에 넣을 거니까 **'웹(Web)'**을 기본 상태로 **<link>와 @import**가 있는데 **<link>**를 선택하시면 됩니다.
다음은 첫 번째 코드 복사 창에 있는 **'Copy code'**를 눌러 코드를 복사하고, 이 코드를 HTML 편집창에서 검색창에 <head>를 검색해 <head> 바로 아래에 코드를 삽입해줍니다. 저는 구분하기 쉽고 나중에 검색으로 쉽게 찾게 하기 위해서 주석을 달았습니다. 주석이란 웹상에 나타나는 것이 아닌 사용자가 코드에 대한 설명을 달아두는 것 정도로 이해하시면 됩니다.
💡 주석 다는 방법: ``으로 완성할 수 있으니 종종 활용하셔서 코드를 정리하시기 바랍니다.
아래 제가 넣은 코드를 그대로 공유해 드리니, 이 폰트를 그대로 사용하려면 복사해서 사용해도 됩니다.
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='anonymous' href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap' rel='stylesheet'/>
CSS 코드 적용 방법
다음 순서로 당연히 두 번째 CSS 코드를 복사하여 붙여넣으라고 생각하시겠지만, 저는 블로그의 전체에 기존 폰트를 무시하고 이 폰트를 적용하는 방식으로 넣고 싶어서 챗GPT에게 물어보고 다음의 코드를 얻었습니다. 이 코드로 적용하니 한 방에 모든 블로그의 폰트가 변경되어서 좋았습니다. CSS 코드는 다음의 방법으로 찾아 넣을 수 있습니다.
CSS 코드 넣는 위치 찾기:
HTML 코드 편집창에서 검색 단축키 Ctrl + F를 눌러 ]]></b:skin>를 검색하세요. 이 코드가 정확하게 무슨 뜻인지 알지 못해도, 이 코드 위에 입력해야만 CSS 코드가 제대로 작동한다는 것을 기억하시면 됩니다. 구글 블로그는 대부분 이 코드를 가지고 있습니다.
아래 CSS 코드를 확인하고, 이 코드를 그대로 복사하여 위에 말씀드린 ]]></b:skin> 코드 위에 붙여넣기 합니다.
CSS
/* 모든 요소에 Noto Sans KR 폰트 적용 */
body,
body *,
.widget-content,
.post-body,
h1, h2, h3, h4, h5, h6,
.navbar,
.sidebar,
button,
input,
select,
textarea {
font-family: 'Noto Sans KR', sans-serif !important;
}
/* 특정 요소들의 폰트 스타일 유지를 위한 예외 처리 (아이콘 폰트 등) */
.fa,
.fab,
.fal,
.far,
.fas {
font-family: "Font Awesome 5 Free", 'Noto Sans KR', sans-serif !important;
}
/* 기타 아이콘 폰트에 대한 예외 처리가 필요할 수 있습니다 */
 |
(블로그 HTML 편집창에서 ]]></b:skin> 위에 CSS 코드를 붙여넣은 캡처 이미지) |
제가 블로그 HTML 편집창에 넣은 코드를 캡처한 이미지입니다. 이와 같이 입력하고 저장하시면 구글 블로그에 폰트를 적용하는 절차가 끝이 납니다.
이 글을 읽어보고 이해가 안 가거나 시도해도 안 되는 부분이 있다면 댓글로 소통할 수 있어요. 배우는 입장에서 함께 이야기 나눠보세요!
0 댓글