티스토리 뷰

리뷰/폰트

구글의 새로운 한글 웹폰트

.


구글의 새로운 한글 웹폰트


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

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


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

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

게다가 폰트소개를 보니

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

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

라고합니다 뭔소리래?;


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

-구글폰트


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

역시 구글신.



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







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

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


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

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

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

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





구글폰트 바로가기


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



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

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






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

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

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

저는 이미 덕지덕지지만;


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





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




<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">



이 부분을 복사합니다


+ 묘한오빠님 팁추가!

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

&amp;subset=korean

를 추가해야합니다


<예제>

<link href="https://fonts.googleapis.com/css?family=Gugi&amp;subset=korean" rel="stylesheet">








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






<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 + 한국어



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

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

공유하기 링크
비슷한 글을 보려면
,


 리뷰/폰트 카테고리 관련글


  • 프로필사진 공수래공수거 구글폰트가 여러 종류가 있군요
    처음 보는것도 있습니다
    그런데 적용하는건 어렵네요 ㅎ
    2018.06.28 09:51 신고
  • 프로필사진 청춘일기 원하는 폰트 몇 개만 추가되면 더 바랄게 없겠어요 ㅎㅎ
    컴맹도 할 수 있다! 라고 적어놨는데 어려우신가요 ㅠ.ㅠ
    2018.06.28 16:24 신고
  • 프로필사진 kangdante 다양한 한글 폰트를 만날 수 있어 좋네요
    오늘도 여유로운 하루되세요.. ^^
    2018.06.28 11:16 신고
  • 프로필사진 청춘일기 비가 많이 와서 습한데 상쾌한 하루 보내시기 바랍니다^^ 2018.06.28 16:25 신고
  • 프로필사진 Deborah 이거 정말 좋아요. 폰트를 다운 받는 방법까지 수고 많으셨네요 2018.06.28 12:45 신고
  • 프로필사진 청춘일기 필요하신 분에게 도움이 되면 좋겠네요^^ 2018.06.28 16:25 신고
  • 프로필사진 슬_ 그래서 이 포스트 제목이 독도체였군요!
    알기 쉽게 정리해주셔서 감사해요. 눈에 들어오는 폰트도 몇 개 있네요! +_+
    다음에 적용하고 싶을 때 청춘일기님 포스트 보고 따라해야지^0^)/
    2018.06.28 16:42 신고
  • 프로필사진 청춘일기 저도 눈에 띄는개 몇 개 있어서 다 적용하고 싶지만 테스트 해보니 너무 중구난방되는 느낌이라 제목과 닉네임만 적용해봤습니다 제목도 아마 조만간 원래대로 바꿀것같기도;
    슬_님 블로그는 거의 완성형이니 웹폰트에 손 댈것도 없을 것 같아요^^
    2018.06.28 17:15 신고
  • 프로필사진 *저녁노을* ㅎㅎ소스 넣기 어려워요.ㅋㅋ 2018.06.29 05:20 신고
  • 프로필사진 청춘일기 그런가요?^^;
    저는 반찬만들기보다 훨씬 쉬운데말이죠ㅠㅠ
    2018.06.30 11:23 신고
  • 프로필사진 _Chemie_ 거지체ㅋㅋㅋㅋㅋㅋ
    저도 찬찬히 보는데 예쁜 폰트들이 몇 눈에 보여요! 포인트로 쓰면 좋겠다 싶은 것들도 있고!ㅋㅋ
    글 읽기 전부터 제목 폰트 이쁘다고 생각했는데 오늘 소개해 주신 폰트 중 하나였군요!ㅋㅋㅋ
    2018.06.29 07:23 신고
  • 프로필사진 청춘일기 가독성을 해칠까 독도체는 임시로 적용해봤는데 뭔가 싸인펜으로 적은 느낌이 좋네요+_+ 당분간 그냥 놔둘까 생각중이에요 ㅎㅎ
    나중에 한가해지면 _Chemie_님도 시도해보세요^^
    2018.06.30 11:26 신고
  • 프로필사진 블라 블라 제 블로그에서는 나눔고딕을 사용하고 있는데 생각보다 한글폰트가 꽤 다양하게 지원되네요?! 2018.06.29 13:10 신고
  • 프로필사진 청춘일기 이번에 한글폰트 업데이트가 많이 됐더라구요 덕분에 이것저것 가져다 써봤습니다^^ 나눔고딕이 가독성 참 좋죠 2018.06.30 11:27 신고
  • 프로필사진 묘한오빠 블로그명의 글꼴이 맘에 들었는데 적용된 것을 보니..., 글체가 작을 경우는 혼돈이 오겠네요 ^^;
    전 청춘일기님 나눔해주신 폰트가 갑 of 갑입니다용 `ㅅ`
    2018.06.29 19:01 신고
  • 프로필사진 청춘일기 그거 제목에도 적용해봤는데 꽤나 가독성이 떨어져서^^; 포인트로만 사용하는게 좋겠더라구요 ㅎ
    저도 아직까지 나눔바른고딕이 가독성 제일 좋은거같아요^^
    2018.06.30 11:29 신고
  • 프로필사진 팩토리사장 블로그가 너무 이쁘네요. 정말 본받고 싶은 블로그에요 ㅠ_ㅠ 글도 너무 잘 봤습니다. 본김에 폰트 새로 시도해보려고요 ^^ 감사합니다. ㅇㅅㅇ 2018.06.30 11:16 신고
  • 프로필사진 청춘일기 별거없는 블로그 잘 봐주셔서 감사합니다!
    폰트적용에 도움이 되었으면 좋겠군요^^
    2018.06.30 11:37 신고
  • 프로필사진 garam_林 폰트 적용하는 법을 자세하게 알려주셨네요.
    나중에 저도 한번 해볼까봐요. 근데 귀차니즘때문에 언제가 될는지는...ㅋㅋ
    2018.07.02 17:25 신고
  • 프로필사진 청춘일기 너무나도 간단하니까 나중에 기분전환용으로 한 번 바꿔보세요^^
    제가 만든 폰트가 아니라서 林자는 적용이 안되는게 아쉽네요 ;ㅁ;
    2018.07.02 22:52 신고
  • 프로필사진 Normal One 오... 몇 가지 추가되었네요!? 구글폰트 몇 개 없었는데... 그런데 이젠 그냥... 맑은고딕이랑 애플고딕이 제일 편하네요.ㅋㅋㅋㅋㅋ 혹 다음에 블로그 바꾸면 기본 폰트로 가려구요! 2018.07.03 19:33 신고
  • 프로필사진 청춘일기 윈도우와 맥의 기본을 쓰시나봐요
    애플고딕은 본 적이 없지만 안봐도 깔끔하겠죠 ㅎ
    원래 커스텀의 끝은 순정이라고 했습니다^^ 심플 이즈 더 베스트 ㅎㅎ
    2018.07.03 23:59 신고
  • 프로필사진 Normal One 서피스랑 아이폰 쓰고 있습니다 :)
    정말 말씀하신 대로 심플한 게 최고.ㅋㅋㅋ
    2018.07.04 01:38 신고
  • 프로필사진 묘한오빠 덕분에 구글 웹폰트 추가를 잘했습니다.
    팁, 하나 공유하겠습니다. &amp;subset=korean를 추가해야 IE에서 정상출력이 되는 것을 확인 했습니다.

    IE에서 글꼴이 이상해서 보니, "https://fonts.googleapis.com/css?family=폰트 + &amp;subset=korean"

    알고 계시겠지만, 혹시나 하고 댓글 남겨요 ^^
    2018.07.03 22:00 신고
  • 프로필사진 청춘일기 그런가요?몰랐던 정보 알려주셔서 감사합니다^^
    ie는 제대로 확인하지 않아서 몰랐는데 ie도 들여다 봐야겠네요
    2018.07.04 00:01 신고
  • 프로필사진 이은수 흐미~~ 참 어렵네요~~ ㅡㅡ 2018.07.04 20:53 신고
  • 프로필사진 타리 청춘일기님 블로그는 들어오는 것만으로도 기분이 좋아지네요
    너무 아기자기하고 예뻐요~
    2018.07.04 18:01 신고
  • 프로필사진 청춘일기 이런 극찬을+_+ 감사합니다!
    게으른 포스팅을 반성하며 더 분발해야겠네요^^
    2018.07.04 23:57 신고
  • 프로필사진 타리 닉네임에 하트가 있고없고는 무슨차이일까요 ^^ 2018.07.04 18:02 신고
  • 프로필사진 청춘일기 프로필 버튼을 하트모양으로 바꾼거랍니다
    프로필 설정을 안하신 분들은 하트가 없는거죠^^
    2018.07.04 23:59 신고
  • 프로필사진 타리 글쿤요 실력도 좋으시지만
    꾸미시는 아이디어 발상도 너무 귀엽고 재밌네요 ㅎㅎ
    2018.07.25 21:34 신고
  • 프로필사진 이은수 감사합니다~~ 제목 폰트만 좀 바꾸고 싶었는데... ^^
    html은 잘 모르지만 한번 도전해 봐야 겠습니다.. ㅎㅎ
    근데 링크된 구글폰트 페이지는 i.e에서는 안 되는 건가요? support가 안된다고 뜨네요... 크롬으로 들어가야 하는 건가요???
    2018.07.04 20:52 신고
  • 프로필사진 청춘일기 이미 위에 묘한 오빠님 댓글을 보신것 같네요^^
    뒷부분에 묘한오빠님이 알려주신 부분을 추가하시면 됩니다
    2018.07.05 00:00 신고
  • 프로필사진 이은수 아, 한가지 궁금한게 있는데요` 웹폰트는 인터넷상에서만 사용이 가능 한건가요?? 다운로드는 안되는 건가요?? 2018.07.04 21:01 신고
  • 프로필사진 청춘일기 웹폰트는 서버에 폰트를 올려두고 누구나 똑같은 글자로 볼수있게하는 거구요 다운받으시면 다운받아 설치한 사람만 보이게 되는거죠
    폰트 설정창에 다운버튼이 있으니 다운받아서도 사용할 수 있답니다
    2018.07.05 00:02 신고
  • 프로필사진 야메군 포스트의 타이틀 폰트는 독도체인가요? 궁금합니다..^^ 2018.08.23 08:39 신고
  • 프로필사진 청춘일기 네 맞습니다.
    독도체가 두 가지인데 east sea dokdo체 입니다^^
    2018.08.23 17:26 신고
  • 프로필사진 구글캘린더 여기 폰트 무료 인거죠? 2018.09.20 01:05 신고
  • 프로필사진 SE O 와 ! 구글폰트에서 맨날 똑같은 폰트만 지원해서 질렸었는데 찾아보니 예쁜것들이 많이 추가됐네요
    좋은 정보감사합니다~
    2018.11.25 18:46 신고
댓글쓰기 폼
공지사항