구글 블로그를 원하는 폰트로 변경하기

연결문서

구글 블로그에서 노토산스 폰트 적용하기

메모

css작성중

이전에 구글 블로그에서 노토산스 폰트를 적용하는 방법을 다룬 글을 작성했습니다. 하지만 시간이 지나면서 노토산스가 제 취향에 맞지 않는다는 생각이 들었어요. 사실 제 선호는 프리텐다드와 넥슨고딕입니다. 고민 끝에 기존 CSS를 수정하여 폰트를 변경하기로 했습니다.

변경하려는 폰트는 프리텐다드는 본문에, 넥슨고딕은 헤딩 및 제목에 사용하려고 합니다. 대부분의 사람들도 이런 방식으로 CSS를 수정합니다. 새로운 스킨을 개발하는 대신, 기존 스킨에서 폰트만 바꾸면 간편하게 적용할 수 있습니다.

이 글은 Fiksioner v4 구글 블로그 테마를 기반으로 작성되었습니다. 그러나 원리는 비슷하므로 참고해서 폰트를 변경해보세요.

기존 노토산스 설정 삭제

먼저, 기존에 설정된 노토산스 폰트 설정을 삭제해야 합니다. HTML 수정에 들어가 <head> 내부에 있는 구글 웹폰트와 노토산스 폰트 관련 CSS 코드를 제거합니다.

기존 스킨 분석

구글 블로그의 기존 스킨에서 폰트 관련 CSS 설정을 살펴보았습니다.

전역 폰트 설정:

html, body, button, [class*="btn"], .contact-form-button, input, textarea {
    font-family: var(--fontBody), system-ui, -apple-system, BlinkMacSystemFont, 'Ubuntu', 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif;
}

제목 폰트 설정:

h1, h2, h3, h4, h5, h6, .blog-title, .widget-title {
    font-family: var(--fontTitle), system-ui, -apple-system, BlinkMacSystemFont, 'Ubuntu', 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif;
}

폰트 변수 설정:

:root {
    --fontBody: 'Noto Sans';
    --fontTitle: 'Noto Sans';
}

원래의 스킨 css에서는 Noto Sans로 설정되어 있군요! 이제 이 설정만 변경하면 됩니다.

폰트 변경하기

원하는 폰트를 눈누 사이트에서 보고 마음에 드는 폰트를 선택한 후, CSS에 추가합니다. 웹폰트는 @font-face 형식으로 CSS에 바로 추가할 수 있습니다. 구글 블로그에서는 HTML을 직접 수정할 수 없지만, 고급설정에서 CSS를 추가할 수 있습니다. 폰트를 사용하기 전 라이선스를 꼭 확인하세요.

구글 블로그 관리자 페이지에서 레이아웃 → 고급설정 → CSS 추가로 이동합니다.
CSS 편집 창에 웹폰트를 추가합니다.

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('웹폰트 주소') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('웹폰트 주소') format('woff');
    font-weight: normal;
    font-style: normal;
}

위처럼 웹폰트를 추가한 후, 구글 블로그에서는 추가한 CSS를 바로 적용할 수 있습니다.

HTML 코드 수정

이제 추가된 css 폰트를 적용시킬 차례입니다. html 변경으로 들어가 컨트롤 f를 눌러 --fontBody: 'Noto Sans'를 찾아서 원하는 폰트로 수정합니다.

:root {
    --fontBody: 'Pretendard-Regular';
    --fontTitle: 'NEXON Lv2 Gothic';
}

이렇게 수정하고 변경됐는지 확인후 확인이 되었으면 변경 저장을 하세요. 다른 폰트로 변경하고 싶다면 같은 방식으로 웹폰트를 올리고, :root에서 폰트 설정만 변경하면 됩니다.

CSS로 폰트 변경하기 (HTML 수정 없이)

만약 위의 방법이 어렵거나, HTML을 수정하지 않고 간단하게 폰트를 변경하고 싶다면, 구글 블로그 관리자에서 직접 CSS를 추가하는 방법을 사용할 수 있습니다. 이 방법을 통해 레이아웃과 고급설정 메뉴에서 손쉽게 폰트를 변경할 수 있습니다.

구글 블로그 관리자 페이지에서 레이아웃 → 고급설정 → CSS 추가로 이동합니다.
CSS 편집 창에 웹폰트와 폰트 설정코드를 함께 추가합니다.

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('웹폰트 주소') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('웹폰트 주소') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 제목 스타일 설정 */
h1, h2, h3, h4, h5, h6, .blog-title, .widget-title {
    font-family: 'NEXON Lv2 Gothic', sans-serif !important;
}

/* 본문 글자 스타일 설정 */
body, p, li, a {
    font-family: 'Pretendard-Regular', sans-serif !important;
}

이 코드를 CSS 편집 창에 추가한 후, 저장하면 웬만한 경우에는 바로 적용됩니다. !important는 기존의 CSS 스타일보다 우선 적용되도록 하는 명령어로, 필요한 부분에 사용하면 효과적으로 원하는 스타일을 적용할 수 있습니다.