블로그스팟 참 어렵죠?
블로그스팟을 시작하면서, 폰트 적용은 정말 좌절의 영역이었습니다. 대체 왜 폰트를 지정해도 방문자들이 보는 화면에는 다른 폰트로 나오는 걸까요?
게다가 테마를 한번 바꾸기라도 하면, 글 전체의 폰트가 변경됩니다.
대체 왜 기본 메뉴의 폰트를 적용해도 적용해도, 실제 제가 얻는 화면에서는 다른 폰트가 나오는 걸까요?
구글 블로그스팟의 편집기는 대체 왜 이런 걸까요? 어떻게 해야 하나요?를 아주 많이 고민했습니다.
글에서 사용하는 폰트나 줄간격 같은 요소는 결국 작성자의 취향과 방향성을 드러내며, 더 넓게 보면 블로그 분위기와 정체성을 만드는 부분이기도 합니다. 그런데 이런 기본 설정을 한 번에 맞추는 방법을 알아두지 않으면, 글을 쓸 때마다 스타일을 반복해서 손봐야 하는 번거로운 상황이 생길 수 있습니다.
왜 글꼴이 바뀌는 걸까요?
블로그스팟의 테마는 색상이나 화면 구성뿐 아니라 폰트의 종류와 크기, 여백, 링크 색상 같은 요소까지 모두 포함한 전체 디자인 규칙이라고 할 수 있습니다.
이런 글꼴과 여백, 링크 색상 등에 대한 설정을 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 — 테마보다 내 설정을 우선 적용 | 테마 변경에도 글꼴 유지 |
댓글 쓰기