구글블로그에 "테마(템플릿)"에 폰트를 적용하는 방법에 대해 정리해보려고 합니다만, 큰 틀은 벗어나지 않으나, 테마의 Html 코드에 따라 적용 방법에 차이가 있습니다.
자꾸 까먹어서 정리하려고 합니다.😂
기본적으로 제공되는 폰트 외에 적용을 시키면 페이지 스피드에 - 점수가 될 수 있습니다만, 큰 차이는 없습니다.
구글블로그 무료 테마에서 한글 폰트 적용하는 방법으로 글을 진행하겠습니다.
💡테마 폰트 변경 전에는 항상 기존 테마 템플릿 📂HTML 백업해두세요.
테마 폰트 적용하기
연습용 블로그에 Webium 무료 테마를 적용시킨 상태입니다.
맑은 고딕으로 표시 되어 있네요.
테마의 Font-family 찾기
1.블로그 설정
2.블로그 테마
3.템플릿 수정 - HTML 수정 들어가 줍니다.
4. HTML 코드 사이 공백에 마우스를 한 번 클릭하고
5. 컨트롤 F 를 눌러 찾기를 열어줍니다.
 |
| Webium 테마 font-family 검색 상태 |
6. font-family 검색해줍니다.
폰트 패밀리 코드 살펴보기
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;}
이런식으로 폰트를 찾을 수 있는데. font-family를 보시면 'Poppins' 폰트가 사용되고 있는 것을 알 수 있습니다.
폰트 위치 찾기
1. 컨트롤 + F 찾기를 열어줍니다.
2. Poppins 폰트가 어디에 사용되었는지 찾아줍니다.
기본 폰트라서 여기저기 많이 들어가 있습니다. 테마에 따라서는 2~3개만 표시 되기도 합니다.
사용되고 있는 코드 살펴보기
<Variable hideEditor="true" name="body.font" description="Font" type="font" default="normal 400 14px Poppins, 'Helvetica Neue', Helvetica, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
💡블로그 테마 곳곳에 이 폰트들을 사용한다고 지정해둔 겁니다.
폰트 적용 이해하기
1. font-family - 폰트 파일 가져오기
폰트를 저장해둔 곳 입니다. 폰트 패밀리는 폰트를 테마로 가져 오는 역할이라고 생각하시면 됩니다.
2. 가져 왔으니 사용하기
폰트 패밀리에서 사용되는 폰트 이름을 알았고, 그리고 그 폰트가 어디에 사용되는지 알았으면 끝난겁니다.
리디바탕체로 폰트 바꾸기 준비단계
1. 원하는 웹폰트 검색해서 찾기
이런식으로 구글링에 검색해줍니다. 다운로드 방식만 제공하는 곳은 제외입니다. 티스토리는 폰트 파일을 직접 올릴 수 있지만, 구글블로그는 불가능합니다. woff 또는 woff2 주소를 가지고 있는 웹폰트를 찾아야 합니다.
2. 리디바탕체 woff2
 |
| @ 하나는 빼주세요. |
눈누 폰트, 어썸폰트 같은 사이트에서 font-face 방식으로 공유 되고 있는 것을 찾아줍니다.
@font-face {
font-family: 'RidiBatang';
font-weight: normal;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/ridi/RidiBatang.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/ridi/RidiBatang.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/ridi/RidiBatang.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/ridi/RidiBatang.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/ridi/RidiBatang.ttf') format("truetype");
font-display: swap;
}
이 코드에서 woff2 만 필요하기 때문에 다른 url은 지워줍니다.
@font-face {
font-family: 'RidiBatang';
font-weight: normal;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/ridi/RidiBatang.woff2') format('woff2'),
font-display: swap;
}
폰트 변경하기
1. poppins 폰트의 font-face 를 싹 없애고, 리디바탕체 font-face로 바꿉니다.
 |
| 싹 밀어버리고 리디바탕체만 넣은 상태 |
2. Poppins 가 적혀 있던 곳을 찾아서 'RidiBatang' 으로 바꾸기
💡메모장을 열어서 바꾸고 싶은 폰트와 바꿀 폰트 이름을 적어두고 번갈아 가며 찾기 하시면 편합니다. 아니면 아예 테마 HTML 백업 받아서, 메모장으로 변경 하셔도 좋습니다.
 |
| 위 : 변경 전 / 아래 : 변경 후 |
Poppins 적힌 곳에 모두 바꿔줍니다.
모두 변경 끝😎
폰트 확인해보기
맑은 고딕 폰트에서 리디바탕체로 완전하게 바뀐 것을 확인할 수 있습니다.
더 간단하게 그냥 덮어쓰기 하는 CSS 코드가 있기는 합니다만, 그 방식을 사용하면 템플릿에서 필요 없는 폰트까지 받아오기 때문에 사이트 점수에 좋지 않습니다. 그리고 템플릿을 직접 만든게 아니라면, 적용되지 않는 경우도 있고, 꼬여버리는 경우도 있습니다.
지금 같은 방법으로 위치를 바꿔주는게 안전하고 깔끔하게 적용이 됩니다. 페이지스피드에 영향도 적습니다. (오히려 점수가 좋아지는 경우도 있음..)