Please Enable JavaScript!
Gon[ Enable JavaScript ]

구글 폰트 사이트 이용해서 나눔고딕 적용하기

인터넷/구글 크롬
반응형

구글 폰트 사이트 이용해서 나눔고딕 적용하기

 

환경: Chrome

 

구글에서는 다양한 폰트를 가져가서 쓸 수 있도록 서비스를 제공합니다. 블로그나 웹 사이트 제작할 때 일일이 받아서 서버에 올려 놓지 않아도 import 을 이용해 간단하게 폰트를 변경할 수 있습니다. 그런데 2바이트를 사용하는 아시아권 폰트는 정식 서버가 아닌 베타 서버에 올라가 있습니다. 한국어도 마찬가지 입니다. 

 

구글 웹 폰트 주소는 아래와 같습니다. 링크를 클릭해서 정식 서버로 접속하시면 현재까지 708 개의 폰트들이 올라가 있는 것을 확인할 수 있습니다.

https://www.google.com/fonts 

구글 폰트 사이트 이용해서 나눔고딕 적용하기

 

현재 지원하는 공식 지원 폰트는 1바이트 위주의 언어만 추가가 되어 있습니다. 2바이트는 DBCS 라고도 하는데 한국어, 중국어, 일본어 등이 들어갑니다. 아시아권 언어들이 대부분입니다. 1바이트(SBCS)로 모든 문자 집합을 표현할 수 없기 때문에 2바이트를 사용하는 것입니다.

구글 폰트 사이트 이용해서 나눔고딕 적용하기


그럼 2바이트 문자는 지원하지 않느냐? 지원은 하는데 정식 오픈은 아니고 베타 형태로 지원하고 있습니다. 여기에 한글관련 폰트들이 모두 모여 있습니다. 나눔고딕도 이곳에 있겠죠.

https://www.google.com/fonts/earlyaccess

구글 폰트 사이트 이용해서 나눔고딕 적용하기

 

Ctrl + F 를 눌러 Nanum, Korean 으로 검색하면 한글 폰트들을 찾을 수 있습니다. 이렇게 검색된 나눔 폰트를 티스토리 블로그에 적용해 보겠습니다.

구글 폰트 사이트 이용해서 나눔고딕 적용하기

 

¤ 구글 폰트에 등록된 폰트 사용하기

 

검색된 폰트의 내용에는 폰트에 대한 설명과 어떻게 사용하는지 샘플이 나와 있습니다. 먼저 Link 에 있는 소스를 복사해서 CSS 파일 안에 넣습니다. 티스토리에서는 CSS 편집기를 열어 제일 상단에 붙여 넣습니다.

 

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

구글 폰트 사이트 이용해서 나눔고딕 적용하기

 

다음은 'Nanum Gothic' 을 적용하고 싶은 곳에 넣어 줍니다. 폰트의 이름은 Example 란에 있으므로 그대로 복사하거나 입력해 주면 됩니다. 이상으로 구글 폰트 서버를 이용해 여러 폰트들을 이용하는 방법에 대해 알아 보았습니다.

구글 폰트 사이트 이용해서 나눔고딕 적용하기

 

반응형
Posted by 녹두장군1
,