구글블로그 폰트변경하여 적용하는 방법

이 글에는 제품소개로 수익금을 얻는 링크가 포함되어 있습니다.

구글블로그 폰트변경 어떻게 해야할까요?

이번에도 역시나 불편하고 불친절한 구글블로그를 원망하면서 시작해봅니다. 구글블로그는 완전불편하지만 완전편리하게도 html편집이 가능해 내맘대로 원하는것을 구현할 수 있도록 해줬다는 점입니다. 그리고 티스토리처럼 사사건건 간섭하고 광고갖다붙이고 하는 짓은 안하죠.

조금 불편함을 인내할 마음만 있다면 구글블로그도 충분히 가치가 있습니다. 이번 시간에는 블로그의 폰트를 변경하는 방법에 대해서 설명해드릴게요. 물론 저는 전문가가 아님을 알려드리고 저역시 배워가면서 알려드리는것이니 잘못된 점이 있다면 댓글남겨주셔서 알려주셨으면 합니다.

폰트변경 하는 방법1

폰트를 변경하는 방법 그 첫번째는 테마의 기능을 이용하는 방법입니다. 이는 크게 어려울것이 없고 간단한 설정만으로 폰트를 변경해볼 수 있는 장점이 있습니다. 하지만 테마에 따라서 폰트를 변경하는 메뉴가 없는경우와 폰트를 변경할 수 있어도 그 폰트들이 내 맘에 안드는 단점이 있어서 내가 딱 원하는 폰트를 찾는다면 이 방법이 아닌 2번째 방법을 살펴보시길 추천드립니다.

1. 먼저 블로그관리자페이지에서 레이아웃 → 테마디자이너를 클릭합니다.

2. 저의 경우는 고급 메뉴안에 Fonts라는 메뉴가 존재합니다. 이는 각각의 테마마다 다르니 자신의 테마가 지원을 하지않으면 없을수도 있으니 이점을 생각하고 살펴보세요.

3. Fonts메뉴에 들어가니 아래의 캡처이미지처럼 각각의 위치에 해당하는 폰트를 내가 직접 선택할 수 있습니다.

4. 폰트리스트에는 여러가지 폰트가 쭉 나열됩니다. 그러나! 대부분의 구글블로그테마가 외국에서 만들어지다니 영어로 된 폰트만 쭉 나열되는 단점이 있어요. 그래서 이것저것 바꿔봐도 딱 내맘에 드는 폰트를 적용할 수 없을지도 모르는거죠.

그래서 원하는 폰트를 적용하지 못하면 무용지물이 되는거라 이방법은 그다지 추천드리지 않아요. 물론 사용자에 따라서는 원하는 폰트가 있을수도 있고 영문폰트를 찾고 계실지도 모르니 그건 자신의 상황에 맞게 활용해보면 좋을것 같습니다.

폰트변경 하는 방법2

구글폰트는 이렇게 폰트를 웹사이트나 블로그에 링크를 걸어서 사용할 수 있는 코드를 제공해주고 폰트를 다운로드 받을 수 있게 지원해주는 사이트입니다. 이 서비스를 이용해 구글폰트에 있는 폰트를 내블로그에 링크로 연결하여 원하는 폰트로 바꿔줄 수 있는 방법입니다. 간단하고 원하는 폰트를 직접 골라 적용할 수 있어서 만족도가 높습니다. 먼저 폰트를 살펴보려면 아래의 링크버튼을 눌러주세요.

구글폰트 바로가기

구글폰트에는 이런 폰트가 있어요

구글폰트에는 한글폰트도 꽤나 많이 보입니다. 이 폰트들은 모두 사용이 허가되었으므로 이용하는데 부담없이 구글에서 제공하는 링크를 받아서 사용할 수 있어요.

구글폰트목록의 일부를 캡처하였습니다

저는 이폰트를 적용할거예요

구글폰트 중 저는 가장 기본적이지만 아주 깔끔하고 선명하게 보이는 고딕체를 선호해서 "Noto Sans Kr" 폰트를 선택하였습니다. 지금 이 블로그에 보여지는 폰트랍니다. 이 폰트를 검색에서 찾아 Get Font버튼을 누르면 폰트를 링크해서 가져갈 수 있는 페이지를 만날 수 있습니다. 아래의 캡처이미지를 참고해보세요.

Noto Sans Kr 폰트의 상세페이지

html코드 적용방법

웹, 안드로이드, iOS, Flutter 등의 메뉴가 있지만 우리는 블로그에 넣을거니까 웹을 기본상태로 <link>와 @import가 있는데 <link>를 선택하시면 됩니다.

다음은 첫번째 코드복사창에 있는 Cpoy code를 눌러 코드를 복사하고 이 코드를 html편집창에서 검색창에 <head>를 검색해 <head> 바로 아래에 코드를 삽입해줍니다. 저는 구분하기 쉽고 나중에 검색으로 쉽게 찾게하기위해서 주석을 달았습니다. 주석이란 웹상에 나타나는것이 아닌 사용자가 코드에 대한 설명을 달아두는것 쯤으로 이해하시면 됩니다.

🙄주석다는 방법

으로 완성할 수 있으니 종종 활용하셔서 정리하시기 바랄께요.

아래에 제가 넣은 코드를 그대로 공유해 드리니 이 폰트를 그대로 사용하려면 복사해서 사용해도 됩니다.

1
2
3
4
5
<!-- 전체에 구글웹폰트 적용 -->
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='crossorigin' href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&amp;display=swap' rel='stylesheet'/>
<!-- 전체에 구글웹폰트 적용 -->
Colored by Color Scripter
cs

CSS코드 적용방법

다음순서로 당연히 두번째 css코드를 복사하여 붙여넣으라고 생각하시겠지만 저는 블로그의 전체에 기존폰트를 무시하고 이 폰트를 적용하는 방식으로 넣고 싶어서 챗GPT에게 물어보고 다음의 코드를 얻었습니다. 이 코드로 적용하니 한방에 모든 블로그의 폰트가 변경되어서 좋았습니다. css코드는 다음의 방법으로 찾아 넣을 수 있습니다.

CSS코드 넣는 위치 찾기

html코드 편집창에서 검색단축키 Ctrl+F키를 눌러 ]]></b:skin>를 검색하세요. 이 코드가 정확하게 무슨뜻인지 알지못해도 이 코드 위에 입력해야만 css코드가 제대로 작동한다는것을 기억하시면 됩니다. 구글 블로그는 대부분 이코드를 가지고 있습니다.

아래의 CSS코드를 확인하고 이 코드를 그대로 복사하여 위에 말씀드린 ]]></b:skin> 코드 위에 붙여넣기 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 모든 요소에 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;
}
/* 기타 아이콘 폰트에 대한 예외 처리가 필요할 수 있습니다 */
Colored by Color Scripter
cs

제가 블로그 html편집창에 넣은 코드를 캡처한 이미지입니다. 이와 같이 입력하고 저장하시면 구글블로그에 폰트를 적용하는 절차가 끝이 납니다.

CSS코드를 넣은 캡처이미지

이 글을 읽어보고 이해가 안가거나 시도해도 안되는 부분이 있다면 댓글로 소통할 수 있어요. 배우는 입장에서 함께 이야기 나눠보세요.

이 글의 카테고리 : 꾸미기팁

구글블로그 폰트변경하여 적용하는 방법

구글블로그 폰트변경 어떻게 해야할까요?

폰트변경 하는 방법1

폰트변경 하는 방법2

구글폰트에는 이런 폰트가 있어요

저는 이폰트를 적용할거예요

html코드 적용방법

🙄주석다는 방법

CSS코드 적용방법

CSS코드 넣는 위치 찾기

댓글 쓰기

문의하기 양식