블로그 웹폰트 적용하기 02.구글 웹폰트 사용

지난 포스팅에서는 티스토리 블로그에 직접 폰트를 업로드하여 블로그 글씨체를 변경하는 방법을 알아봤었죠.

지난 글 ☞ 블로그 웹폰트 적용하기 01.티스토리 글꼴 등록

 

그런데 이 방법은 용량의 문제, 트래픽 과부하 등 여건에 따라 부담이 될 수도 있어서

이번에는 업로드 없이 폰트 링크 주소만 가져와서 적용하는

더 간편하고 쉬운 구글 웹폰트 적용 방법에 대해 얘기를 할까해요.

 

 

 

#1. 구글 웹폰트

 

구글 웹폰트는 무료입니다.

메인 페이지에 들어가보면 800종이 넘는 폰트를 제공하고 있습니다만  

여기엔 아쉽게도 한글 폰트가 없어요... .... (무룩 무룩 시무룩)

☞ 구글 웹폰트 (https://fonts.google.com/)

 

대신! 별도의 페이지에서 몇 종류의 한글 폰트를 제공하고 있어요.  

☞ 구글 웹폰트 한글 (https://fonts.google.com/earlyaccess)

Ctrl+F 하셔서 korean 이라고 검색해서 찾으시면 되는데 제가 확인한 바로는 아래 글꼴들이 전부입니다.

 

Hanna
Jeju Gothic
Jeju Hallasan
Jeju Myeongjo
KoPub Batang
Nanum Brush Script
Nanum Gothic
Nanum Gothic Coding
Nanum Myeongjo
Nanum Pen Script
Noto Sans KR

 

몇 종류 되지는 않네요.

그래도 많이 사용되는 나눔 고딕을 비롯한 글꼴들이 있으니 유용할 듯 해요. 다운로드도 가능합니다.

 

 

 

 

#2. 구글 웹폰트 적용하는 방법

 

구글 웹폰트 적용하기는 정말 쉬워요.

나눔 고딕을 예시로 적용해볼게요. 

 

구글 폰트 earlyaccess 사이트로 가셔서 Ctrl+F로 <nanum gothic>을 찾으세요.

 

필요한 정보는 아래 사진의 ①번과 ②번 뿐!

Link의 ①은 폰트의 경로입니다. CSS 상단에 그대로 복사하여 붙이기만 하면 돼요.

Example의 ②는 지정된 폰트명이므로, 적용하고자 하는 font-family의 속성에 저 폰트명을 삽입하면 돼요. 

 

 

 

저 화면을 닫지말고, 

티스토리 블로그 관리 <  꾸미기  <  HTML/CSS편집  < CSS탭으로 갑시다.

 

<@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);>를 드래그 복사하여 css 상단에 붙여넣기 합니다. (아래 ②번)

그리고 폰트명인 <'Nanum Gothic'> 을 드래그 복사하여 적용할 font-family 속성 맨 앞에 붙여넣기 합니다. (아래 ③,④,⑤번)

Fastboot 스킨 사용하시는 분들은 저와 똑같이 변경하시면 되겠습니다. 그리고 저장.

 

 

 

쨘. 익스플로러와 크롬 모두 나눔 고딕이 잘 적용된 것을 확인 할 수 있습니다. >.<

 

 

 

너무 빨리 끝났네요.ㅎㅎ

직접 폰트 파일을 업로드하여 설정하는 것보다 아주 간편할 뿐더러

여러 브라우저를 동시에 지원하니 번거롭지 않아서 좋아요.

 

다만, 구글웹폰트를 적용 후 갑자기 로딩이 느려졌다는 불만의 글들을 봤어요.

저는 아직 체감을 못하겠는데 텍스트의 양이 많아지거나, 다른 글꼴 설정과 충돌한다거나 하면 그럴 수도 있나봐요.

본인이 직접 이리저리 테스트해보시고 가장 적합한 방법을 선택하세요.

 

홈페이지의 최적화를 고려한다면 이것저것 설정하기보다는

가급적 윈도우 기본 글꼴을 사용하는 편이 낫다고 생각하긴 합니다.

저도 전부 윈도우 기본 글꼴로 교체할까말까 고민하긴 했는데...

되려 예쁜 유료웹폰트를 적용하고 싶은 마음이 꿈틀대고 있어 억누르는데 급급하니

당분간 나눔고딕에게 의지해야겠어요...