블로그스팟은 폰트 적용은 참 이해하기 어렵습니다.
블로그스팟(구글 블로거)를 처음 쓰면서 가장 먼저 좌절했던 부분은 폰트 적용이었습니다. 대체 왜 기본 메뉴의 폰트를 적용해도 적용해도, 실제 제가 얻는 화면에서는 다른 폰트가 나오는 걸까요?
이건 정말 보는데로 화면이 출력되는 위지윅에 익숙한 저에게는 당혹스러운 경험이었습니다.
게다가 겨우겨우 맞춰 놓고, 마음에 드는 다른 테마로 고치면!
글 전체가 또 다른 폰트로 변경이 됩니다.
구글 블로그스팟의 편집기는 대체 왜 이런 걸까? 해결 방법은 없을까? 를 아주 많이 고민했습니다.
글의 폰트와 줄간격 등은 글을 쓰는 사람의 취향과 의도. 좀더 나가면 블로그의 아이덴티티를 구성하는 요소라고 말할 수도 있습니다. 그런데 이걸 쉽게 통일하는 방법을 찾지 못하면, 글을 고치고 고치고 또 고쳐야 하는 황당한 경우를 맞을 수도 있다는 문제가 생깁니다.
왜 글꼴이 바뀌는 걸까요?
블로그스팟의 테마는 블로그의 색상, 배치, 구조 뿐만이 아니라, 폰트의 종류와 크기, 여백, 링크 색상, 다른 구성요소들의 모양과 색상에 대한 정의를 모두 포함하고 있습니다.
이런 폰트, 여백, 링크 색상 등등에 대한 정의를 CSS(스타일시트)라고 부릅니다.
그래서 테마를 다른 것으로 바꾸거나 업로드하면 폰트, 여백 등등도 새로운 모양으로 바뀌됩니다.
이럴 때마다 글꼴을 다시 설정하기 번거롭고, 포스트마다 적용하기도 힘들죠.
하지만, 한 번 세팅으로 이 문제를 해경하는 방법이 있습니다. 테마 무시하고 글꼴을 유지하는 방법입니다. 2단계로 간단하게 적용할 수 있습니다.
1단계: 내 블로그에 글꼴 불러오기
먼저 블로그가 사용할 글꼴을 미리 정의하고 불러오는 단계입니다. 이건 블로그스팟에게 “나 이 글꼴 쓸 거야, 미리 로드해둬!”라고 알려주는 과정이라고 보면 됩니다.
Google Fonts에서 링크 복사하기
- Google Fonts에 접속합니다. → 원하는 폰트를 검색합니다. → 우측의 'Get font'를 클릭합니다.
 |
| 구글 폰트에서 원하는 글꼴 선택후 Get font 클릭 |
- 이어 나오는 화면에서 우측의 '<> Get embed Code' 클릭
 |
| 구글 폰트 화면에서 '<> Get embed code' 클릭 |
- 표시된 <link> 코드를 복사
 |
| embed code 복사 |
테마 HTML에 붙여넣기
- Blogger 관리자 → ‘테마’ → 삼각형 드랍다운 버튼 → ‘HTML 편집’ 클릭
 |
| 블로그스팟 관리자 화면 → 테마 → 삼각형 드랍다운 버튼 → HTML편집 |
- 코드 맨 위쪽에서 <head>를 찾고 바로 아래에 복사한 <link> 코드를 붙여넣기
- 저장 클릭!
이제 이렇게 하면 블로그 전체에서 그 글꼴을 쓸 수 있는 환경이 만들어집니다. 이 과정은 한번만 진행하면 됩니다.
참고로, 만약 내가 정의하려고 하는 글꼴이 시스템 기본 글꼴이라면, 위의 1단계는 생략할 수도 있습니다.
2단계: 개별 글에 글꼴 적용하기
이제는 글을 쓸때마다 글꼴을 적용합니다. 메뉴에서 글꼴을 선택하는 방법이 아니라, CSS 코드를 직접 삽입하는 방식으로 진행합니다.
이 방법의 핵심은 CSS 명령 중 !important를 활용하는 것입니다. 이 표시가 붙으면 “테마 설정이 뭐든 간에 이걸 우선으로 적용해라!”라는 의미가 됩니다.
HTML 보기에서 스타일 삽입
- 새 글을 작성하거나, 기존 글을 수정할 때 상단 메뉴에서 ‘HTML 보기’ 클릭
 |
| HTML보기 메뉴 |
- 글의 가장 위쪽에 아래 코드를 붙여넣기
<style>
/* 폰트 이름은 사용하려는 폰트 이름으로 변경하세요. */
.post-body, .post-body p {
font-family: '원하는 폰트 이름', sans-serif !important;
}
</style>나눔 고딕 폰트 예시입니다. <style>
.post-body, .post-body p, .post-body span {
font-family: 'Nanum Gothic', sans-serif !important;
font-size: 16px !important;
}
</style>그다음에는 평소처럼 글을 작성하면 됩니다. 이 코드가 글에 포함되어 있으면, 테마가 바뀌더라도 해당 포스트의 글꼴은 절대 바뀌지 않습니다.
작동 원리 간단 설명
- font-family: 글꼴을 지정하는 부분
- sans-serif: 글꼴이 적용되지 않을 때 대체로 쓸 기본 서체
- !important: 테마 CSS보다 이 설정을 ‘강제 우선’으로 적용
이렇게 폰트를 정의한 후에는 블로그 테마에 상관없이 글꼴을 유지할 수 있어 스트레스가 적어졌습니다.
만약 위의 1단계에서 일반적인 시스템의 글꼴이어서 html에 글꼴을 정의하는 것을 생략한 경우라면, 아래처럼 글꼴을 정의하는 것도 가능합니다. 이렇게 하면 위의 1단계가 필요없습니다.
/* Windows 사용자에게는 맑은 고딕, Mac/iPhone 사용자에게는 Apple 폰트,
둘 다 없다면 시스템 기본 산세리프 폰트를 사용하라는 명령 */
font-family: '맑은 고딕', 'Apple SD Gothic Neo', sans-serif !important;
이 경우 1순위는 맑은 고딕, 2순위는 Apple SD Gothic Neo, 3순위는 sans-serif가 적용됩니다.
글꼴은 블로그의 인상입니다.
내 블로그에 자주 방문하거나, 내 블로그에 들어왔던 독자가 하나의 포스트가 아닌 여러 포스트를 읽게 될 경우 일관된 디자인과 글의 모양을 보여주는 것은 매우 중요합니다. 사람은 시각적인 일관성에 민감하게 반응하기 때문입니다.
특히 브랜드 블로그나 정보 콘텐츠를 운영하는 경우, 폰트가 바뀌면 신뢰도가 낮아질 수도 있어요.
- 가독성 향상: 같은 글꼴과 줄 간격으로 꾸준히 유지되면 독자의 피로도가 줄어듭니다.
- 브랜딩 효과: 나만의 글꼴 스타일은 콘텐츠의 아이덴티티가 됩니다.
- 디자인 통일성: 이미지, 제목, 본문이 어우러질 때 한결같은 폰트가 시각적 완성도를 높입니다.
결국 폰트를 고정하는 건 단순한 꾸미기가 아니라, 브랜딩과 콘텐츠 품질 관리의 기본일 수 있습니다.
참고할 만한 공식 자료
- Google Fonts 공식 사이트 — 무료 글꼴 다운로드 및 링크 제공
- 추가적인 자료 읽기 - Blogger 공식 도움말 — 테마 맞춤 설정하기 --> 글꼴 색상 및 크기 변경하기
마무리: 내 블로그의 글꼴 지키기
이제 여러분도 더 이상 테마 바꿀 때마다 폰트 걱정은 하지 않아도 됩니다. 글꼴을 한 번 불러오고, 각 글에 스타일 코드를 추가하는 것. 이 두 단계면 충분합니다.
이건 단순한 기술이 아니라, 내 콘텐츠를 스스로 관리하는 방법이기도 합니다. 작은 글꼴 하나지만, 그 안에는 여러분의 스타일과 브랜드가 담겨 있죠. 그러니 다음에 테마를 바꿀 땐, “글꼴은 그대로 유지되고 있지?” 하고 한 번 확인해보세요. 그럼 블로그 전체가 훨씬 더 깔끔하고 일관된 느낌으로 바뀔 겁니다.
핵심 요약
| 단계 | 설명 | 비고 |
|---|---|---|
| 1단계 | 테마 HTML의 <head> 아래에 Google Fonts 링크 추가 | 글꼴 로드 (한 번만 필요) |
| 2단계 | 글 HTML에 <style> 코드 삽입 | 글꼴 고정 (포스트별 적용) |
| 핵심 키워드 | !important — 테마보다 내 설정을 우선 적용 | 테마 변경에도 글꼴 유지 |
댓글 쓰기