청춘일기님이 소개하신 "구글의 새로운 한글 웹폰트" 구경해 보세요

청춘일기님이 소개하신 "구글의 새로운 한글 웹폰트" 구경해 보세요



이전에 구글 웹폰트를 적용하는 경우, 


브라우져 혹은 사용자의 환경에 따라 웹폰트가 잘 되는 경우,  안되는 경우도 있었다. 그리고 웹폰트를 링크하는 경우 다운로드 되는 동안 블로그의 로딩속도에 영향을 받았다. 그래서 한 동안 스킨에 기본 제공되는 웹폰트만 사용하고 있었다.


청춘일기님의 "Google Fonts는 머신 러닝에 기반을 둔 최적화 기술을 통해 한글 폰트를 동적으로 분할 다운로드합니다"라고 소개글에 따라 적용을 해보았는데 이전보다 훨씬 빠른 속도와 적용이 매우 쉬었다.


구글폰트 - https://fonts.google.com/?subset=korean 를 참고하여 청춘일기님의 자세한 설명을 구경하세요.

 



나의 경우 설정방법은 아래와 같이 추가 해주면 간단하게 적용이 된다.


skin.html


〈link href="https : //fonts.googleapis.com/css?family=East+Sea+Dokdo|Gugi|Song+Myung|Stylish"〉


Dokdo(독도폰트)와 Gugi (소리나는데로 읽으면 거지폰트, ㅋㅋ) 등  링크를 한다.


※ 여기서 중요한 팁 하나, IE에서 정상출력이 되려"&subset=korean" 추가를 한다 

~~~~~~|Song+Myung|Stylish&subset=korean" 이렇게 해주면 IE에서도 정상출력 된다.


style.css 


변경하고자 하는 폰트 속성을 추가, 입력한다 

font-family: 'Gugi', cursive;

font-family: 'East Sea Dokdo', cursive;

font-family: 'Stylish', sans-serif;

font-family: 'Song Myung', serif;


카테고리와 글제목에 적용카테고리와 글제목에 적용



구글 웹폰트 적용 방법을 알려주신  청춘일기님, 덕분에 잘 적용하였습니다. 감사합니다

묘한오빠

남자의 호칭 중에 "오빠"처럼 묘한 것도 없었다

이미지 맵

묘한오빠/블로그가 변한다 다른 글

이 글에 담긴 의견 15

*

*

사진 첨부

    • 우와 예전부터 제목글만 폰트를 바꿀수 있었으면 좋겠다 싶었는데...^^
      저도 한번 적용토록 공부해봐야 겠네요~ 감사합니다~~ ^^

    • 저도 청춘일기님 덕분에 멋지게 바꿨습니다. 멋지게 바꾸시면 놀러가겠습니다. ^^

    • 감사 합니다~
      근 한시간 넘게 연구해난 끝에 폰트를 바꾸는데 성공 했습니다. 청춘일기님 포스팅을 참고하고 (아 이거 힘들었습니다.. ㅜ.ㅜ)
      I.E에서 글자가 이상하게 나오는 점은 묘한오빠님 포스팅보고 내용 추가 했더니 제대로 나오네요~~ ^^

    • 클릭을 요래요래 하시면 된는데 ㅎㅎ
      클릭 몇번하고 블로그 수정해서 올려주면 간단한데... 은수님이나 저나 눈이 침침해질 나이라 그런걸겁니다 ㅎㅎ

    • 근데 블로그의 글씨체가 I.E 보다는 크롬에서 보니까 가독성이 더 좋아 보이던데.. 그건 왜그런거지요??
      계속 크롬을 써야 하는 건지....ㅎㅎ

    • 팁이라면 추가하신 글꼴, 폰트 패밀리에 스킨에서 많이 쓰는 폰트를 추가하시면 대충 비슷한 가독성을 보실수 있고 IE의 속성을 보시면 하드웨어 성능인가?를 선택해주시면 나름 잘 보이실거예요.

    • 저는 이렇게 추가했습니다

      #tt-body-page #pagetitle .category { font-family: 'Gugi', cursive, 'ooppa-chfont', 'ooppa-icon-491'; }
      #tt-body-page #pagetitle h1 { font-family: 'East Sea Dokdo', cursive, 'ooppa-chfont', 'ooppa-icon-491'; font-size: 38px; font-weight: 400; }
      @media only screen and (max-width: 425px) {
      #tt-body-page #pagetitle h1
      { font-family: 'East Sea Dokdo', cursive, 'ooppa-chfont', 'ooppa-icon-491'; font-size: 29px; font-weight: 400; }
      }
      #tt-body-index #pagetitle h1,
      #tt-body-archive #pagetitle h1,
      #tt-body-category #pagetitle h1,
      #tt-body-guestbook #pagetitle h1 { font-family: 'Stylish', sans-serif, 'ooppa-chfont', 'ooppa-icon-491'; font-size: 30px; font-weight: 400; }
      @media only screen and (max-width: 425px) {
      #tt-body-index #pagetitle h1,
      #tt-body-archive #pagetitle h1,
      #tt-body-category #pagetitle h1,
      #tt-body-guestbook #pagetitle h1
      { font-family: 'Stylish', sans-serif, 'ooppa-chfont', 'ooppa-icon-491'; font-size: 22px; font-weight: 400; }
      }

    • 우왕~ 한글폰트 많이 늘어났네요~ @.@
      딱 눈에 들어오는게 있긴 한데.. 바꾸려니 일이 많아질 것 같아서리.... ^^;

    • ^_^ 겸손하시기는...,
      땀똔님 실력이면 2~3줄만 추가하시면 되는데...,
      지금 당장 폰트가 맘에 들어 몇 줄을 추가해서 사용하다 나중에 추가한 줄만 삭제하면 되니..., 이 변덕이 언제 또 바뀔지 ㅋㅋㅋ

    • 앗, 요 몇 일 블로그 접속을 못한 사이 이런 포스팅을 하셨다니!
      ie에서 확인을 안했더니 저런 문제가 있는 줄도 몰랐네요 덕분에 저도 추가적용했어요 ㅎㅎ
      소제목으로 넣으신 타이틀의 송명체도 좋은데요. 저도 어느 부분에 써먹어야 할 지 찾고 있습니다^^
      링크도 감사합니다 ^0^

    • 덕분에 티스토리 글쓰기때 머리말 H1~ H5까지도 별도로 폰트를 적용해서 사용하니 좋더라구요.
      덕분에 제가 감사합니다 ^_^

    • 저도 폰트에 관심이 많아 지난 6년 간 이것저것 많이 시도해보았지만
      명조체가 제일 좋네요. : )

      렉시새봄과 이롭게새롭게 ㅎㅎ

    • 렉시새봄체 오래전에 사용했었는데 어느순간 유료로 바뀌고 나서는 구글로 갈아탔습니다 ㅋㅋ;

      그래도 시간되실 때, 도전해보세요. ^_^

이전 글

다음 글