구글폰트에서 웹폰트 무료사용

HTML,CSS에 제한이 없다면 티스토리 블로그를 포함하여  홈페이지에서 구글폰트에서 웹폰트를 무료로 사용할 수 있다. WOFF 형식이 아닌 TTF 형식의 폰트도 거기에서 다운로드할 수 있다.  

구글폰트 사용은 네이버와 다음 블로그에서 불가능하니 하지 말았으면 한다. 구글폰트에서 제공한 웹폰트를 무료로 사용할 수 있는데 거기에서 사용할 수 있는 한글 폰트는 영어에 비해 부족하지만 Nanum Gothic(나눔고딕), Nanum Myengjo(나눔명조), Noto Sans KR, Noto Serif KR 등 쓸만한 것이 많다. 참고로 현재 기준으로 구글폰트에서 사용할 수 있는 한글웹폰트는 26개이며 한글웹폰트를 포함 모든 폰트는 977개를 제공하고 있다.

구글폰트에 접속하면 영어폰트 등 977개의 웹폰트를 볼 수 있다. 많은 웹폰트에서 한글웹폰트만 나오게 하기 위해서는 아래 그림 Language에서 Korean을 선택하면 된다.  

그러면 구글폰트에서 제공하는 26개의 한글폰트가 나타난다. 언어가 Korean이 됐다. 영어라면 English를 선택하면 되고 다른 언어면 다른 언어를 선택하면 된다. 참고로 아래에 나오는 Noto Sans KR 폰트는 티스토리 스킨에서 사용중이다. 참고로 구글폰트는 영어, 일본어, 중국어 등 다양한 언어를 지원한다.  

오래 전에 무료인 구글폰트에서 한글웹폰트를 사용하려 했지만 마음에 드는 것이 없었고 속도에 부담이 있어 영어웹폰트인 Yanone Kaffeesatz만 사용하고 있었다. 하지만 최근에 한글폰트인  Noto Serif KR를 사용하고 있다.

그리고 얼마 전까지 나눔명조를 사용하다가 Noto Serif KR로 변경했다. 왜냐하면 아래 그림을 보듯 Noto Serif KR이 나눔명조(Nanum Myeongjo)와 스타일이 비슷하고 1번과 2번을 보듯 스타일이 많았기 때문이다. 이런 단순한 이유로 Noto Serif KR를 사용하고 있다.

그러면 이 블로그에 Noto Serif KR을 어떻게 적용했는지 설명하려고 한다. 위 그림 3번 아이콘을 클릭한다. 웹폰트를 적용하는 방법을 보기 위해 화면 하단에 검정 막대를 클릭한다. 그러면 접혀진 것이 펼쳐지면서 아래 그림 같은 화면이 나타난다. 

위 그림 CUSTOMIZE 등은 폰트 옵션을 추가하는 것으로 다루지 않을 것이다. 왜냐하면 그것은 처음부터 신경 쓰면 골치 아프기 때문에 기본을 익힌 후 알았으면 한다. 기초적인 것만 적으려 한다.  참고로 @IMPORT로 넣는 방법은 css에 넣는 방법이다.

화면에 나오는 4번 코드는 HTML의 head안에 삽입하고 5번 코드는 폰트를 변경할 곳에 마다 넣으면 된다. 즉 그 곳에 Noto Serif KR 폰트를 사용하겠다는 것이다. CSS를 사용해 본 사람은 5번 사용법을 알 것이다. 참고로 6번 아이콘을 클릭하면 위에서 적었듯 TTF 파일형식으로 Noto Serif KR 폰트를 다운로드 할 수 있다.

이 블로그에서 어떻게 했는지 간단히 적으면 위에서 적었듯 head안에 <link~ 코드를 삽입했다. 참고로 폰트 옆에 나오는 400,500,600 숫자는 폰트 스타일(style) 옵션으로 위에서 Noto Serif KR은 7가지가 있다고 했고 이것은 customize에서 설정했다. 이런 것은 신경쓰지 말았으면 한다. 

나는 5번을 body에 기본 글꼴로 정했으므로 CSS에 넣고 HTML에도 넣었다. 5번은 폰트를 변경하고자 하는 곳에 넣는 것이니 한번만 정의하는 것이 아니다.  CSS에서 font-family를 안다면 내가 무슨 말을 하는지 알 것이다. 참고로 웹폰트 코드를 HTML, CSS에 넣어도 상관없다. CSS에 넣고자 한다면 위에서 간단히 적었는데 IMPORT로 한다. 

구글폰트에서 웹폰트만 서비스하는 것이 아니라 폰트를 TTF도 다운받을 수 있으며 TTF만 다운로드 할 수 있으니 아쉽다. 만약 나눔고딕을 배포처에서 다운 받는다면 아래 그림처럼 다양한 형식과 운영체제 별로 받을 수 있다.

  

구글폰트 - 웹폰트 무료사용