구글 폰트 블로그에 적용하기 (폰트 찾기, 임베드 코드 가져오기, 적용,강조, 실수3가지)

블로그 기본 폰트, 어딘가 밋밋하다고 느껴지신 적 없으신가요? 브라우저 기본 글꼴은 무난하지만 개성이 없습니다. 오늘은 구글 폰트(Google Fonts)를 블로그스팟에 무료로 적용하는 방법을 알아보겠습니다. 저도 처음 시작할땐 기본 폰트만 썼었는데 폰트 하나로 글이 더 예쁘게 보이더라구요.

[구글 폰트란?]

구글이 무료로 제공하는 웹폰트 서비스입니다. 저작권 걱정 없이 상업적으로도 사용할 수 있고, 별도 프로그램 설치 없이 코드 몇 줄만 추가하면 바로 적용됩니다. 한글 폰트도 다양하게 제공되기 때문에 한국어 블로그에도 부담 없이 쓸 수 있습니다.

[1단계: 원하는 폰트 찾기]

fonts.google.com에 접속합니다.
왼쪽 필터에서 언어를 Korean으로 설정하면 한글이 깨지지 않는 폰트만 골라볼 수 있습니다.
마음에 드는 폰트를 클릭한 뒤, 원하는 굵기(Weight)를 선택하고 오른쪽의 "Get font" 버튼을 누릅니다.

한국어 블로그에 무난하게 어울리는 폰트로는 Noto Sans KR(깔끔한 고딕체), Gowun Dodum(부드러운 느낌), IBM Plex Sans KR(모던한 느낌)이 있습니다.

[2단계: 임베드 코드 가져오기]

폰트를 선택하면 아래와 같은 코드가 제공됩니다. Noto Sans KR을 예로 들면 이렇습니다.

<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=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

(참고: preconnect는 브라우저가 구글 서버에 미리 연결을 맺어두게 해서 폰트 로딩 속도를 빠르게 해주는 역할을 합니다. 빼먹지 마세요.)

[3단계: 블로그스팟에 적용하기]

Blogger 관리자 → 테마(Theme) → HTML 편집으로 들어갑니다.
<head> 태그를 찾아서, 그 바로 아래에 2단계에서 복사한 <link> 코드 3줄을 붙여넣습니다.
같은 화면에서 <style> 태그를 찾은 뒤(보통 <b:skin> 안에 있습니다), 아래 CSS를 추가합니다.

body {
  font-family: 'Noto Sans KR', sans-serif;
}

저장하고 블로그를 새로고침하면 전체 폰트가 바뀐 것을 확인할 수 있습니다.

[제목만 다른 폰트로 강조하고 싶다면]

본문과 제목의 폰트를 다르게 주고 싶을 때도 있죠. 이럴 땐 h1, h2 같은 제목 태그에만 별도로 지정하면 됩니다.

h1, h2, h3 {
  font-family: 'IBM Plex Sans KR', sans-serif;
  font-weight: 700;
}

[초보자가 자주 하는 실수 3가지]

폰트 이름의 따옴표를 빠뜨리는 경우: font-family: Noto Sans KR;처럼 띄어쓰기가 있는 폰트명에 따옴표를 안 붙이면 적용되지 않습니다. 반드시 'Noto Sans KR'처럼 작은따옴표로 감싸주세요.
모든 굵기를 다 불러오는 경우: wght@100;200;300;400;500;600;700;800;900처럼 필요 없는 굵기까지 전부 불러오면 페이지 로딩이 느려집니다. 실제로 쓰는 굵기(보통 400, 700 정도)만 골라서 불러오세요.
preconnect를 빼먹는 경우: 폰트 자체는 적용되지만, 로딩 속도가 눈에 띄게 느려집니다. 특히 한글 폰트는 영문 폰트보다 용량이 훨씬 크기 때문에 이 한 줄의 차이가 큽니다.

[한글 폰트, 용량이 큰 이유]

한글은 조합 가능한 글자 수가 11,000자가 넘어서, 영문 폰트보다 파일 용량이 훨씬 큽니다. 그래서 한글 구글 폰트를 쓰면 사이트 로딩이 느려졌다는 이야기를 종종 듣게 됩니다. 로딩 속도가 걱정된다면, 폰트 굵기를 1~2개로 최소화하는 것만으로도 체감 속도가 꽤 달라집니다.

핵심 요약

fonts.google.com에서 언어를 Korean으로 설정하면 한글 폰트만 골라볼 수 있습니다.
<link> 코드는 <head> 태그 바로 아래, CSS는 <style> 태그 안에 추가합니다.
폰트명에 따옴표를 빠뜨리지 않도록 주의하세요.
필요한 굵기만 최소한으로 불러와야 로딩 속도가 느려지지 않습니다.

여러분의 블로그에는 어떤 분위기의 폰트가 어울릴 것 같나요? 깔끔한 고딕체가 좋을지, 부드러운 느낌이 좋을지 한번 fonts.google.com에서 직접 둘러보세요.