구글 블로그 (Blogger) 테마 폰트 (글꼴) 변경 방법
Blogger 폰트를 변경해보자
귀찮지만 한번 세팅해두면 구글 블로거(Blogger) 테마의 글꼴을 원하는대로 변경 할 수 있는 방법에 대해 알려드리려고 합니다. 처음 한 걸음만 조금 힘들 뿐, 막상 해보면 별 거 아닙니다. 여러분들이 원하는 글꼴이 있다면 얼마든지 구글 블로그 폰트를 변경하실 수 있습니다.
구글 폰트
구글 폰트라는 플랫폼이 있습니다. 말그대로 구글에서 제공하는 웹 폰트 서비스입니다. 직접 해당 파일을 다운로드 받을수도 있지만 저는 웹 폰트의 HTML 태그를 사용해 원하는 글꼴을 내 테마(스킨)에 로드하고 꺼내 쓰는 웹폰트(Web Font) 방식을 사용할 것입니다.
구글 폰트 공식 홈페이지를 방문해 보세요.
그러면 바로 직관적으로 글꼴 확인이 가능한 웹페이지가 열릴 것입니다.
먼저 우리가 해야 할 것은 언어를 한국어로 변경하는 겁니다. 그래야 한글 폰트들만 검색될테니까요. 만약 영어 폰트도 필요하시다면 추가로 선택하시면 됩니다.
변경 예시로 저는 고운 바탕체를 선택했습니다.
바로 적용 전에 먼저 테스트를 해보시는걸 추천합니다. 각 단락별로 마우스 클릭으로 선택할 수 있고 단락마다 폰트 크기를 다르게 설정해서 비교 할 수 있습니다. HTML의 기본 폰트 크기인 16px 전후로 비교를 해보시기 바랍니다. 왜냐하면 가끔 글씨체가 16px 보다 작아지는 경우에 깨지는 폰트도 있거든요. 물론 이 테스트에서는 문제가 없었는데 막상 블로그에 적용하고 보니 문제가 발생하는 폰트도 있습니다만 그래도 불량 확률을 최대한 줄이기 위해서는 이렇게 테스트를 미리 진행해보고 결정하는것이 좋아요.
폰트가 이상 없다면 화면 우측 상단에 있는 Get Font 버튼을 눌러서 장바구니에 추가합니다.
이제 장바구니 버튼을 누르면 방금 전 넣었던 고운 바탕 폰트가 있을겁니다. 우측에 있는 Get Embed Code 버튼을 누릅니다.
그러면 이러한 정보창이 보일겁니다.
- 폰트 굵기 설정
- 가져오는 방식 선택
- 가져오는 방식에 따른 코드 출력
- 실제 사용하는 CSS 코드
먼저 1번의 폰트 굵기는 그냥 다 선택하시면 됩니다. 왜냐하면 골라 사용 할 수 있으니까요. 기왕 가지고 올거면 싹 다 가지고 오는게 낫습니다. 이제 2번에서 HTML로 가지고 올지, CSS로 임포트 할 지를 결정하면 됩니다. 하지만 이미 이건 결정되어 있습니다. HTML 코드로 가지고 와야 합니다. 희한하게 CSS의 @import 방식은 작동하지 않더라고요. 이제 HTML 방식으로 가지고 오는걸로 결정이 났으니 3번에 있는 해당 폰트에 대한 HTML <link> 태그를 그대로 복사... 를 해서 가지고 오면 오류가 납니다.
HTML <link> 태그 수정
이것을 스킨의 <title> 아래에 붙여넣기를 하고 저장하면 100% 에러 메세지가 뜰 것입니다. 따라서 다음의 형태로 변경해야 합니다.
수정 전
1 2 3 | <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap" rel="stylesheet"> | cs |
수정 후
1 2 3 | <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=Gowun+Batang:wght@400;700&display=swap' rel='stylesheet'/> | cs |
수정 전과 수정 후 차이점이 보일 것입니다. 일단 <link> 태그의 끝에 /가 추가된 점, 두번째 <link>에 포함된 속성인 crossrigin이 변경된 점, 그리고 마지막 <link> 안 &에 amp; 가 추가된 점입니다. 이 부분만 수정해서 구글 블로그 테마에 잘 넣어주면 오류 메세지 없이 정상적으로 적용이 될 것입니다.
코드를 적용하기 위해서 구글 블로그 관리자 > 테마 > 맞춤설정 옆 화살표 버튼을 누릅니다.
HTML 편집으로 들어갑니다.
<title> 태그 아래에 수정 완료한 구글 폰트 태그를 그대로 붙여넣기 합니다. 여기까지 구글 폰트를 사용하기 위한 기본 세팅이었습니다. 이제 본격적으로 폰트를 변경해 보겠습니다.
CSS 세팅
원래대로라면 일일히 모든 영역을 개발자툴을 사용해 선택자를 파악하고 해당 선택자의 font 또는 font-family 내용을 수정해줘야 합니다. 그러려면 시간이 오래 걸리겠죠? 그래서 제가 한 방에 해결 할 수 있는 CSS 코드값을 들고 왔습니다. 이것만 있으면 댓글 입력창을 제외한 스킨의 모든 영역 글꼴이 변경됩니다. 단 구글 블로그 테마마다 구조가 살짝씩 다를 수 있으니 일부 스킨은 제대로 적용이 되지 않을 수 있습니다.
1 2 3 4 5 6 7 8 9 10 | html, html body, html body .post-title, html body .post-title *, html body .post-header, html body .PopularPosts, html body .post-body, html body .post-body * { font-family: '폰트명', serif(또는 sans-serif) !important; } | cs |
여기에서 여러분들이 수정해야 하는 부분은 폰트명, 그리고 바로 뒤에 따라오는 serif 입니다. 이 부분에 대해서 추가 설명을 해야겠군요.
세리프(serif) → 글자 끝에 장식 있음 → 전통적, 책이나 신문에 많이 사용
산세리프(sans-serif) → 글자 끝 깨끗 → 현대적, 웹 글자에 많이 사용
이 둘이 반드시 따라와야 하는건 아닙니다. 만약 지정한 폰트가 없거나 구글 폰트 서버 오류로 정상적으로 글꼴이 로딩되지 않을 때 대체할 폰트를 다음에 지정하는 것인데 그게 바로 세리프와 산세리프인 것입니다. 본문에서 예시로 설명한 고운 바탕 글꼴의 경우에는 산세리프체에 해당할 것입니다. 명조 계열이 산세리프죠. 따라서 지정한 폰트와 가장 유사한 sans-serif를 폰트 바로 뒤에 입력해두는게 아무래도 낫겠죠? 물론 serif를 사용해도 상관 없어요. 고운바탕체가 없다면 그냥 세리프 폰트 아무거나 적용시키겠다는 뜻이니까요. 만약 세리프, 산세리프 두 가지 모두 입력하지 않았다면 그냥 HTML의 기본 글꼴이 적용됩니다. 이때, 해당 브라우저가 어떤 브랜드냐에 따라서도 폰트가 서로 다를 수 있습니다.
이렇게 수정한 CSS 스타일 코드를 body 선택자 바로 위에 추가했습니다. 사실 CSS 영역 아무 곳이나 넣어도 되지만 그냥 속편하게, 그리고 간편하게 위치를 설명하기에는 body 바로 위가 편리하죠. 이렇게 입력해도 적용이 됩니다.
결과 확인
이건 폰트 적용 전 모습입니다.
그리고 폰트 적용 후 모습이고요. 구글 블로그 폰트가 정상적으로 변경되었음을 알 수 있습니다.
본문도 잘 변경되었군요. 좋습니다. 그럼 여러분들도 원하는 폰트를 적용시켜 보시기 바랍니다. 원하신다면 말이죠. 끝.
댓글
댓글 쓰기
비밀글은 삭제합니다. 공개글로 남겨주시기 바랍니다.