구글의 새로운 한글 웹폰트

구글의 새로운 한글 웹폰트

2018. 6. 28.ㆍ리뷰/폰트ㆍ💬댓글

728x90

구글의 새로운 한글 웹폰트

구글폰트에서 얼리액세스로 한글 웹폰트는 몇 가지만 제공했었는데

이번에 보니 한글폰트 업데이트가 많이 되었더라구요@_@

스킨에 적용하기도 엄청 쉽고요

구글서버를 이용하기 때문에 티스토리에 올려놓고 쓰는 것에 비하면 부담도 없고

게다가 폰트소개를 보니

"Google Fonts는 머신 러닝에 기반을 둔 최적화 기술을 통해

한글 폰트를 동적으로 분할 다운로드합니다"

라고합니다 뭔소리래?;

웹상의 방대한 한국어 문서를 분석한 결과, Google은 주제에 따라 사용되는 글자의 패턴을 발견하고, 패턴에 따라 한글 폰트에 포함된 17,388개의 글리프를 100여 가지 그룹으로 나누었습니다. 여기에 Google Fonts는 사용자가 웹 페이지를 불러올 때, 폰트 전체를 다운로드 하는 대신 내용을 표시하는 데 꼭 필요한 몇 가지 그룹만을 선택적으로 다운로드 하는 방식으로 폰트를 제공합니다. 이 기술을 적용한 Google Font를 사용하면 보다 빠르게 폰트 전체를 다운로드한 것과 다름없는 페이지를 제공할 수 있습니다.

-구글폰트

한글폰트는 용량이 적게는 1M에서 15M이상되는 큰 용량을 가지고 있기때문에 웹폰트로 사용하기 불리한(?) 언어입니다 그래서 구글은 자주 사용되고 필요한 부분만 로딩하는 기술을 적용했다는 말이네요

역시 구글신.

추가된 폰트는 다음과 같습니다

구글에서 제공하는 878개의 폰트 중에 23개의 한글폰트가 있네요

익숙한 폰트들도 있고 처음 보는 폰트들도 있습니다✦‿✦

예전에도 웹폰트 적용하기로 포스팅 한 적이 있지만

직접 웹폰트를 만들고 css를 작성해서 적용하는 방법이라

잘 모르는 분들이 보면 뭔 소리야 하셨을 것 같은데요

구글 웹폰트 적용은 너무 쉬워서 컴맹도 할 수 있는 수준;

구글폰트 바로가기

우선 구글폰트 사이트로 가서 원하는 폰트를 고릅니다

해당 폰트를 클릭하면 상세설명과 폰트 예제를 볼 수 있습니다

원하는 폰트 오른쪽에 + 버튼을 누르면

적용할 웹폰트 목록에 추가됩니다

여러 개를 함께 적용할 수도 있는데 많을수록 속도가 느려지니

최대 3~4개 정도가 적당하지 않을까 싶네요

저는 이미 덕지덕지지만;

위 까만 바를 클릭하면 아래 설청창이 올라옵니다

우측 상단에 다운버튼을 누르면 웹폰트가 아닌 일반폰트로도 다운받아 사용할 수 있습니다

이 부분을 복사합니다

+ 묘한오빠님 팁추가!

인터넷익스플로러(IE)에서도 한글폰트가 제대로 출력되게 하려면

&subset=korean

를 추가해야합니다

<예제>

설정에 스킨 편집으로 들어가서

<head> 와 </head> 사이에 아무데나 붙여주면 웹폰트를 사용할 준비 끝.

font-family: 'Gugi', cursive;

그리고 CSS탭으로 가서 폰트를 적용하고 싶은 부분에 위 부분을 넣어주면 됩니다

보통 HTML이 뭐고 CSS가 뭔지 모르는 분들은 이 부분이 어려우실텐데요

우선 포스트 타이틀에 폰트를 적용하고 싶으면 CSS에서 제목부분을 찾으면 됩니다

초보자도 할 수 있는 무작정 따라하기!

예전 팁을 다시 한 번 써봅니다.

포스팅 할 거 없어서 글 늘리는거 아닙니다;

크롬브라우저 기준.

클릭하면 커져요

브라우저에서 F12를 누르면 오른쪽에 개발자도구가 열립니다

① 여기서 상단에 선택버튼을 누르고

② 적용하고 싶은 폰트, 여기서는 타이틀을 클릭하면

③ 오른쪽 개발자도구 아래에 CSS가 표시됩니다

스킨 설정의 CSS에서 위치만 찾으면 됩니다

제 타이틀 설정은 CSS 916번째 줄에 있다는 뜻.

스킨 설정 CSS탭에서 916번째 줄을 찾아보면 아까 찾은게 딱!

font-family값이 없다면 위에

font-family: 'Gugi', cursive;

를 그대로 붙여 넣으면 되고

저는 이미 폰트 설정이 되어 있으니 "nanumsquare"부분만 'Gugi', cursive 로 변경해 주면 됩니다.

느무느무 간단하죠?^^

몇 개를 이미 제 블로그에 적용해봤습니다

제목에 독도체를 넣어봤구요 닉네임에 gugi 구기? 구지?체를 넣어봤습니다 거지체는 아니겠지;

gugi체는 포인트로 좋은 것 같아요

괜찮은가요?^^

심플이즈더베스트라 생각하는데도 뭔가 계속 추가해서 덧붙이게 되는군요;

그리고 구글폰트에서 제공하는 모든 한글웹폰트는 OPEN FONT LICENSE (OTF) 라이센스로

개인, 상업적, 모든 부분에서 자유롭게 사용하시면 됩니다.(단, 판매금지)

구글에서 github 페이지에 인터랙티브하면서 멋드러진 한글폰트소개 페이지를 만들었으니

다양하게 적용된 웹폰트를 구경하는 것도 재밌을 거에요

Google Fonts + 한국어

좋은 폰트가 적재적소에 쓰인다면 디자인이나 콘텐츠가 더 빛을 발하기도 하지요

블로그에 산뜻하게 폰트 하나 적용해 보시면 어떨까요^^

728x90

저작자표시 비영리 변경금지

'리뷰 > 폰트' 카테고리의 다른 글

2018 한글날 무료폰트 (20)	2018.10.10
저작권에 자유로운 무료폰트 모음 #3 (24)	2018.09.09
다온폰트 무료다운로드 이벤트 (16)	2018.05.31
디자인210 본문쉐어패키지 폰트 무료다운로드 이벤트 (19)	2018.03.12
웹폰트 적용하기 (10)	2018.02.22

공지사항

태그

댓글

'리뷰 > 폰트' 카테고리의 다른 글

[리뷰/폰트] 비슷한 글 보기

블로그 🔥 인기글

7일간 조회수가 높은 순서로 자동 집계됩니다.

블로그 ✅ 최신글

티스토리툴바