블로그스팟 구글 웹폰트 적용 방법 (나눔고딕)

구글 블로그(Blogger)에서 기본폰트를 나눔고딕 등으로 변경하기 위해서는 구글 폰트를 사용하면 된다. 구글폰트가 아니라도 무료로 사용할 수 있는 CDN 웹폰트가 많이 있으니 구글에서 찾아서 사용하면 된다. 아래는 구글 폰트를 사용하여 기본 폰트는 변경하는 방법이다.


1. 구글폰트 사이트 접속 및 폰트 선택


구글폰트(https://fonts.google.com) 사이트에 접속한다.

언어를 "Korean"을 선택 후 원하는 폰트를 클릭한다.


2. 폰트 스타일 선택


원하는 폰트 두께를 선택 후 오른쪽 상단의 옵션 버튼을 클릭한다.


3. 폰트 <link> 태그 복사


<link> 태그를 블로그스팟 HTML에 추가해야 하기 때문에, 해당 구분을 복사한다.

블로그스팟의 HTML에서 오류가 발생하지 않도록 아래처럼 변경해야 한다.


<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=Nanum+Gothic&display=swap" rel="stylesheet">
↓ ↓ ↓ (변경)↓ ↓ ↓ 
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin"/>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic;display=swap" rel="stylesheet"/>


4. 블로그스팟 관리자 페이지 접속


블로그스팟의 관리자 페이지에서 테마 → HTML 편집 메뉴에 들어간다.

5. HTML 편집 화면에서 <head> 태그 하단에 추가


HTML 편집 페이지에서 <head> 태그 하단에 복사한 <link> 태그를 붙여넣가 한다.

6. <body> 속성에 폰트 추가


HTML 편집 페이지에서 <BODY> 태그 속성에 아래의 font-family 속성을 추가한다.

블로그 테마 종류에 따라서 위의 <BODY> 태그 속성이 없을 수도 있다.


font-family: 'Nanum Gothic', sans-serif;


위의 폰트를 적용 후 블로그 페이지를 새로고침하면 폰트가 적용된 것을 확인할 수 있다. 블로그 테마 종류에 따라서 <BODY> 태그의 속성 위치가 틀릴 수 있으니 주의해야 한다.




2 댓글

  1. 감사합니다. link 때문에 고생하고 있었는데!! 잘 해결하였습니다~

    답글삭제
  2. 안됩니다... 왜 안되는지 모르겠네요...ㅠㅠ

    답글삭제

댓글 쓰기

다음 이전