H : T : M : G : A : W

티스토리 블로그 나눔고딕 적용방법티스토리 블로그 나눔고딕 적용방법

Posted at 2013. 10. 2. 13:17 | Posted in ▶ 똑똑한 블로그/블로그(Blog)


티스토리 블로그 나눔고딕 적용방법



블로그를 운영하면서 내 블로그의 글들을 방문자 분들이 조금 더 편하게 볼 수 있는 방법을 고민하게 됩니다. 그래서 현재는 대부분의 설치형 블로거 분들께서 나눔고딕폰트를 이용하고 있는데요. 가독성 및 시안성이 좋은 나눔고딕폰트를 티스토리 블로그에 적용하는 방법을 알아보도록하겠습니다. 


나눔고딕을 티스토리 폰트로 적용하는 방법은 여러가지가 있습니다만, 오늘은 구글 폰트에서 제공해주는 웹폰트를 적용하는 방법을 알아볼까 합니다. 단순히 글꼴을 나눔폰트로 변경할 경우 나눔고딕이 PC에 설치된 사용자만 나눔고딕 폰트로 보여지며 나눔고딕 폰트가 없는 분들은 절대 나눔고딕 폰트를 볼 수 없습니다. 이런 문제점 때문에 웹폰트를 적용하시면 방문자 PC에 나눔고딕폰트가 설치되어있지 않아도 웹상에 올려진 폰트가 자동으로 적용되기 때문에 어느 누구라도 나눔고딕 폰트를 확인할 수 있게 됩니다. 



먼저 아래 구글폰트 사이트로 접속합니다.




폰트가 여러종류가 있는데 아래로 내리시면 Nanum Gothic (Korean) 이 있습니다. 여기서 아래 링크로 적혀진 소스를 복사합니다. 


나눔고딕 티스토리


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



복사한 소스를 style.css  최상단에 붙여넣어줍니다. 여기까지 진행하면 나눔고딕 웹폰트의 위치가 지정된 것입니다. 이제는 티스토리 블로그의 폰트를 전부 나눔고딕으로 바꿔주면 됩니다. 



나눔고딕 티스토리



style.css 에서 ctrl+F 버튼을 눌러서 font-family: 를 검색합니다. 그리고 아래와 같이 검색된 모든 font-family: 뒤에 'Nanum Gothic' 을 넣어줍니다. (스킨 및 개인화에 따라 font-family: 의 위치 및 개수가 다를 수 있습니다.)


# 본 명령어는 폰트를 노출시키는 순서입니다. 즉, 아래 캡쳐화면에서처럼 1번으로 불러올 폰트가 바로 Nanum Gothic, 2번째로 불러오는 폰트가  sans-serif 입니다. 당연히 1번으로 나눔고딕 폰트를 불러올때 위에 나눔고딕 웹폰트 위치를 지정해줬기 때문에 모든 방문자들에게 나눔고딕 웹폰트가 적용됩니다. 


나눔고딕 티스토리


어떤가요? 티스토리 블로그에 나눔고딕 폰트를 적용하는 방법이 생각보다 간단하죠? 많은 도움되시길 바라겠습니다! 


 


    Comments

티스토리 댓글


  1. 좋은 정보 유익한 정보 감사합니다. 티스토리 처음 접하신 분들에게는 반드시 필요한 정보라 사료 됩니다.
    저는 나눔고딕도 좋지만 '맑은 고딕'이 더 끌리더군요.
  2. 나눔 고딕을 너무 사용하고 싶었는데, 덕분에 자동으로 나눔고딕을 사용할 수 있게 되었습니다. ^^
    좋은 포스트 감사합니다.
  3. 전 이번에 나온 나눔바른고딕으로 설정을 했어요..
    전에는 나눔고딕으로 했는데 나눔바른고딕이 좀더 진하고 선명해 보이더라구요..^^
  4. 완전 고맙습니다..~~^^
    오늘 처음 티스토리블로그 개설했는데 좋아하는 나눔고딕을 설치할수 있어서 너무 좋네요..~~^^
    추운날 감기 조심하시고 12월도 잘 마무리 하세요~~^^
  5. 이렇게만 하면 모바일용 스킨을 다로 쓰지 않고 반응형으로 할 경우 글꼴이 로딩되는 동안 화면에 글자가 아무것도 안뜨는 현상이 발생합니다. 1차로 "나눔고딕"이라고 한글로 명기를 해주면 문제가 해결되더군요.
  6. 감사합니다. 덕분에 수정했어요 ^^
  7. 진심으로 감사드립니다 ㅜ.ㅜ;; 여지껏 다른 블로그 다닐때는 잘 안되었는데 엉엉 ㅜ.ㅜ;;
  8. 유용한 정보 감사합니다. 근데 저는 적용이 안되네요...반응형웹 readiz님꺼를 쓰고 있는데.. 고딕폰트적용하려고 온 블로그를 돌아다니다가 드디어 되겠군!!했는데 역시나..안되요..ㅠㅠ
    • 2014.09.05 22:01 신고 [Edit/Del]
      해당 스킨의 설정값이 우선되거나 다른 소스로 인해 차단된듯합니다. 원인을 파악하거나 다른 방법 등으로 이용해주셔야 될 듯 합니다 ㅠㅠ 반응형웹을 써보지 않아서 구조파악이 안되서 도움을 드릴수가 없네요 ㅠㅠ
    • 2014.09.06 00:41 신고 [Edit/Del]
      잘고쳤습니다. 포스팅 글이 도움이 되었어요^^
  9. 좋은 정보 얻어갑니다 :)
  10. 좋은 정보 감사합니다^^ 드디어 나눔고딕을 제 블로그에 적용했네요 ㅎㅎㅎ
  11. 쓰고싶은데 이해가안되네요 원격or 대신좀 도와주실수있나요..
  12. 덕분에 좋은 정보 얻어 갑니다. 가르쳐 주신대로 하니깐 아주 쉽네요ㅎㅎ
    감사합니다^^

Name __

Password __

Link (Your Website)

Comment

SECRET