워드프레스 원하는 폰트로 블로그 꾸미기

By   /   2011년 6월 29일  /   44 Comments

워드프레스 블로그에서 원하는 폰트를 마음껏 사용하고 싶은 충동에 font-family에 원하는 한글 폰트를 다 넣으면 본인의 pc나 맥에서는 그 폰트가 잘 보일지 몰라도 다른 방문자에게는 여전히 기본 폰트만 보여질 수 있습니다. 각 사람마다 다양한 환경에서 인터넷에 접속하기 때문에 이는 어쩔 수 없는 현상입니다. 그럼 모든 사람들에게 원하는 폰트를 보여주기 위해서는 어떻게 하면 좋을까요? 그럼 지금부터 그 방법을 소개드리겠습니다.


Cufon

특징:

  • 원하는 폰트(ttf, otf, & pfb)를 입력하면 자동으로 *.js 파일을 생성해줌
  • 한글은 원하는 글자를 따로 입력해야함(워드프레스 원하는 폰트로 블로그 꾸미기 – 업데이트 되었으니 참고하세요.)
  • 모든 글자에 적용하는 것은 로딩이 느려질 수 있기 때문에 효과가 필요한 글자에만 적용하는 것이 바람직함
  • 변환된 글자는 텍스트가 아닌 png이미지로 로딩

사용법:

Top

1. 원하는 폰트를 준비합니다. HwangC는 다음체를 다운받았습니다.
Top

2. Cufon사이트에서 *.js를 생성합니다. 생성 방법은 아래 이미지를 참고하세요.워드프레스 원하는 폰트로 블로그 꾸미기
워드프레스 원하는 폰트로 블로그 꾸미기** 아쉽게도 한글은 조합이 너무 많아서 포함되지 않았다고 합니다. 원하는 글자를(255자 이내) 넣어 *.js를 생성하시기 바랍니다. 혹시 255자 이상으로 포함할 수 있는 방법이 있는지 개발자에게 문의하였고 답변이 오면 업데이트 하겠습니다. 개발자로부터 답변을 참고로 업데이트 되었습니다. 이 포스팅 이후에 워드프레스 원하는 폰트로 블로그 꾸미기 – 업데이트 참고하세요.워드프레스 원하는 폰트로 블로그 꾸미기*.js 파일을 생성했다면 이제는 그 파일을 사용하는 방법에 대해 알아보겠습니다. 직접 코딩하는 방법과 플러그인을 사용하는 방법이 있습니다. 아래 방법 중에서 여러분에게 맞는 것을 택하시면 되겠습니다.
Top

3-1. 직접 소스를 입력하여 사용: 이 방법은 절차 및 사용 방법에 혼선을 빚을것 같아 여기서는 설명드리지 않겠습니다. 자세한 사항은 구글 검색하시거나 여기를 참고하시기 바랍니다. 간략하게 말씀드리면 <head>에 직접 코딩하여 *.js를 원하는 HTML 태그 및 CSS ID에 적용. (ex: h1, h2, #content, .entry-title 등)
Top

3-2. wp-cufon 플러그인 사용: 자세한 사항은 아래 이미지를 참고하세요.워드프레스 원하는 폰트로 블로그 꾸미기튜토리얼에 여러가지 예들이 있으니 필요한 replacement-code를 골라서 사용하시면 됩니다. 위의 이미지에서 *.js파일 저장 위치를 꼭 확인하세요. …plugins/fonts 폴더에 넣어야 합니다. 폴더가 없다면 생성하시고 넣어주세요.
Top

3-3 All-in-one Cufon 플러그인 사용: 자세한 사항은 아래 이미지를 참고하세요.워드프레스 원하는 폰트로 블로그 꾸미기폰트에 대한 프리뷰를 보여주기 때문에 어떤 폰트를 적용할 지 쉽게 결정할 수 있습니다. 위의 이미지에서 *.js파일 저장 위치를 꼭 확인하세요. …plugins/cufon-fonts 폴더에 넣어야 합니다. 폴더가 없다면 생성하시고 넣어주세요.
Top

4. replacement code를 활용하여 폰트를 적용

직접 코딩이나 플러그인을 설치하셨다면 이제 *.js 폰트를 적용시킬 일만 남았습니다. 이를 적용하기 위해서는 replacement code를 사용해야 합니다. 플러그인 설치하신 분들은 wp-cufon/All-in-one Cufon 세팅 메뉴에서 보여주는 replacement code를 참고하셔도 됩니다. 더 자세한 내용은 Cufon 사이트에서 여러가지 replacement code 사용예를 보여주고 있으니 필요한 것들을 골라 사용하시기 바랍니다.

Top

5. HwangC 적용 예

<기본 서체>

워드프레스 원하는 폰트로 블로그 꾸미기

<다음체 적용>

워드프레스 원하는 폰트로 블로그 꾸미기

워드프레스 원하는 폰트로 블로그 꾸미기

워드프레스 원하는 폰트로 블로그 꾸미기

Cufon 사이트에서 *.js를 생성하기 전에 원하는 글자를 “and also these single characters”박스에 넣어야 한글에 해당 폰트가 적용됩니다. 글자는 스페이스나 ,없이 입력하시면 됩니다. 예)안녕하세요! 만나서 반갑습니다. 황씨입니다:)를 변환시키려면 “and also these single characters”박스에 만나서반갑습안녕하세요황씨입니다 를 입력하시면 됩니다. 참고- “니다“는 두번 겹치기 때문에 한번만 입력합니다. “! : . )” 등의 기호는 *.js를 생성하면 자동 생성되기 때문에 입력하지 않습니다.

Top

마치며

많은 유명 사이트에서 Cufon을 사용하여 여러가지 폰트들로 사이트를 꾸미고 있습니다. Cufon은 폰트를 불러오는 것이 아니라 폰트를 이미지화시켜 불러오기 때문에 다른 환경의 사용자들도 여러분의 페이지에 사용된 여러가지 폰트를 볼 수 있습니다. 혹시 IE에서 문제가 있거나 궁금증 있으시면 FAQ를 참고하시기 바랍니다. 그럼 멋진 폰트와 함께 즐거운 블로깅 하시기 바래요! 업데이트 사항이 있으니 이 포스팅 이후에 워드프레스 원하는 폰트로 블로그 꾸미기 – 업데이트도 참고하세요. 워드프레스 원하는 폰트로 블로그 꾸미기

-Twenty Twelve에서 다음체 적용 화면
워드프레스 원하는 폰트로 블로그 꾸미기워드프레스 원하는 폰트로 블로그 꾸미기

About the author

안녕하세요! 여러분의 편안한 워드프레스 안내자 황씨입니다.

  • http://www.web6.co.kr 황홍식

    저는 똑같이 했는데도 안되네요 ㅠ
    업로드한 파일은 구현할수 없데요 ㅠ

  • http://www.hwangc.com HwangC

    웁스;; “워드프레스 원하는 폰트로 블로그 꾸미기 – 업데이트” 포스트에서 다음 폰트(Daum_Regular.font.js)를 다운받아서 다시한번 해보세요:)

  • hanil

    여기서 다운로드 받은 다음폰트도 이 게시물에 있는 것과 같이 작업해 줘야 하는 건가요?

    • hanil

      여기에서 다운 받은 다음 폰트는 js 화일이네요..
      js 화일은 cufon 사이트에서 작업이 끝난 화일 아닌가요??

      • http://www.hwangc.com HwangC

        네 맞습니다.

        Daum_Regular.font.js은 제가 Daum에서 제공한 폰트를 이용해 생성한 파일입니다.(워드프레스 원하는 폰트로 블로그 꾸미기 – 업데이트 참고)

        즉, Daum폰트를 사용하고 싶을 때는 이미 제가 생성한 Daum_Regular.font.js파일을 사용하시면 됩니다.

        • hanil2

          근데 cufon 사이트에서 폰트 js 화일을 생성할 때 웹사이트 도메인을 넣어주라고 하셨는데, 이미 만들어 놓으신 js 화일을 그냥 사용해도 도메인에 문제가 없는 건가요?

          그리고 cufon plug-in 을 사용할 경우, 기본 css 화일에 있는 font family 에 “돋움”서체를 추가해 놓았을 경우, 그 내용을 초기 값으로 돌려놓아야 하나요??

          • http://www.hwangc.com HwangC

            1. 다음 폰트는 공개된 폰트이기 때문에 생성당시 도메인을 넣지 않았던 것으로 기억합니다. 도메인을 넣는 이유를 해당 도메인에만 적용되는 폰트를 만들기 위함으로 알고있습니다. 특정 상업용 폰트를 사용할 때만 필요한 것같네요.

            2. cufon은 폰트를 이미지화시켜주는 기능입니다. 즉, 원하는 영역에 cufon을 적용하고 나머지 영역에서는 css에서 font family의 폰트에만 적용됩니다. 이미지화시켜주기 때문에 너무 많은 곳에 사용하면 페이지 로딩이 느려질 수 있으니 참고하세요.

  • http://seoworld.net 세오리

    Daum체 JS를 성공적으로 설치했습니다. 코드를 넣어주어야 하는데, 선생님처럼 제목 헤드에만 나오게 하려면 어떤 코드를 써야 하나요?^^; 그리고 코드를 누르면 You do not have sufficient permissions to access this page. 라고 메시지가 뜨는데, 어떻게 하면 이 메시지를 없앨 수 있을까요? 고맙습니다.

    • http://www.hwangc.com HwangC

      안녕하세요
      제목에만 적용하려면 제목의 html태그나 css 클래스를 사용하시면 됩니다. 예를 들어 저는 Cufon(‘.entry-title, h2, .widget-title’, {fontFamily:’Daum_Regular’}); 이렇게 적용했습니다. 원하시는 영역의 html및 css를 확인하시고 적용해보세요. :)

  • 조슈아킴

    덕분에 잘 해결하였습니다.
    감사합니다.

    • http://www.hwangc.com HwangC

      네 감사합니다:)

  • kimjin0

    황선생님~
    저는 워드프레스 첫 입문자 입니다. 짐 열심히 꾸미고 있는데 이렇게 좋은 사이트 발견해서 유용하게 공부하고 있습니다. ^^
    다름이 아니라 저도 예쁜 폰트를 사용하고 싶은데 잘 되지 않네요 ^^;;;;
    플러그인 : all-in-one cufon 설치하였고요
    폰트는 : Daum_Regular.font.js 다운받아 해당 디렉토리 생성후 업로드 하였고요

    그렇다면 전체 워드프레스에 적용하려면 구체적으로 무엇을 작업해 줘야 하나요?

    • http://www.hwangc.com HwangC

      안녕하세요

      전체 사이트에 Daum_Regular cufon을 적용하려고 하신다면 Cufon(‘body’, {fontFamily:’Daum_Regular’}); 가 될 것같네요. 하지만 위 댓글에서 말씀드린 것처럼 원하는 영역에 지정을 해주는 것도 고려해보세요.

      전체 cufon을 지정할 때는 사이트에 글이 많지 않은 경우가 좋습니다. 그림이 주된 사이트라면 cufon 로딩에 크게 문제는 안되겠지만 글이 많다면 로딩이 느려질 수도 있으니까요. 전체 사이트에 지정해보시고 로딩이 느려진다 싶으면 원하는 영역만 cufon을 지정해보세요 :)

      • GAIUS

        Cufon(‘body’, {fontFamily:’Daum_Regular’}); 를 어디다가 입력해야 하나요?

        • http://www.hwangc.com HwangC

          all in one cufon 설정에 가시면 하단에 Cufon Code영역이 있습니다. 거기에 넣어주시면 되요:)

          • GAIUS

            번거롭게 해드려서 죄송합니다.
            Cufon Code 영역에 Cufon(‘body’, {fontFamily:’Daum_Regular’}); 입력후 해보았지만 입력한 글에는 변화가 없어서요..

            • http://www.hwangc.com HwangC

              1. FTP를 열어 …plugins/cufon-fonts 의 디렉토리에 Daum_Regular.font.js파일이 있는 지 확인해보세요.(파일은 워드프레스 원하는 폰트로 블로그 꾸미기 – 업데이트 에서 다운로드 하세요)

              2. Firebug를 켜서 사이트의 html을 확인해보세요. 맨 윗줄에

              <html class="cufon-active cufon-ready" ... >

              이렇게 표시되는 지 확인해보세요.

              3. 일부 영역(예: firebug를 이용해 원하는 영역의 html 및 css를 참고하세요)에만 적용을 해보세요.

  • http://www.shawnstyle.net shawn

    도움이 많이 되었습니다..^^ 워드프레스를 쭈욱 사용하다가 이번에 마음에 드는 유료버전 테마가 있어 구입할려 했는데.. 이쁘다 싶은것들은 내용을 읽어보니 대부분 Cufon을 많이 사용하더군요.. 처음에는 한글이 다 깨져서 왜 그럴까 이곳저곳 돌아다니다가 이곳까지 오게 되었네요.. ㄳ합니다..

    • http://www.hwangc.com HwangC

      구글폰트, cufon 또는 font-face는 프리미엄 테마에서 자주 사용하는 폰트죠. 그 중에서도 cufon을 많이 사용하고 있는 것같습니다. 포스트가 도움이 되었다니 기분 좋네요. shawn님 워드프레스 테마와 사진 너무 멋지네요! 그럼 계속 멋진 사진 기대할게요 :)

  • http://hanajoe.com joe hun

    ㅠㅠ 써주신 순서대로 모두 해봤는데 사이트에는 적용이 되지 않아서 댓글 남깁니다. 밑에 써주신 댓글에 이게 소스로 확인해보니 없어서 스타일 시트 헤더에 들어가서 넣기도 했는데 안되네요. ㅜㅜ 폰트 바꾸려고 이 방법 저 방법 다 써봤는데 한번도 성공한 적이 없어요. 혹시 테마때문에 바뀌지 않는 경우도 있나요?ㅜㅜ 아니면 순전히 제가 잘못하고 있는 것인지.. 상황이 너무 답답해서 댓글 남깁니다.

  • http://skotlex.dominohosting.kr skotlex

    안녕하세요. 좋은 포스팅 덕분에 폰트적용에는 성공했습니다.
    다만 좀 보완하고 싶은점이 있어 이렇게 여쭤보려 합니다.

    #. 블로그에 가보시면 아시겠지만 Cufon.replace(‘#content’); 로 인해 본문부분만 폰트가 적용되어있고 그 외에 나머지 부분(Categories, Recent Posts 내용들)은 일반폰트 그대로더군요. 이 부분은 코드를 어떻게 넣어야 적용이 되는지 알고싶습니다.

    #. 본문을 보면 아시겠지만 폰트크기때문인지 줄과 줄 사이의 간격이 너무 좁아서 가독성이 떨어집니다. 줄간격을 좀 늘리고 싶어서 Header나 Stylesheet 의 line-height: 부분을 찾는대로 다 %를 바꿔봤지만 안되더군요… 따로 조절하는 방법이 있는지 궁금합니다.

    답변 기다리겠습니다. 꼭 부탁드립니다. 감사합니다 ( _ _)

    • http://skotlex.dominohosting.kr skotlex

      지금 다시 해보니 어찌저찌 된 것 같습니다. 결국 혼자 북치고 장구쳤네요;;
      덕분에 귀찮은 일은 안생기실것 같습니다 O_o;

      • http://www.hwangc.com HwangC

        어찌저찌 적용을 잘 하셨다니 저도 기분 좋네요.ㅎㅎ 앞으로 멋진 사이트 기대하겠습니다. :)

  • http://www.infocreative.com 정도천

    안녕하세요. 황씨님 혹시 영문폰트만 바꾸고 싶으면 바꿀폰트 입력하고, 한글은 그냥 아무것도 안하면 기본 웹돋움체로 한글이 표시가 되는지요?
    굳이 한글은 바꿀필요가 없어서 영문만이라도 멋지게 바꾸고 싶은데 한번 머리를 굴려봐야 되겠습니다TT 플러그인의 기능 배우기가 제일 어렵네요. 변수가 워낙 많아서.

    • http://www.hwangc.com HwangC

      안녕하세요!
      영문 폰트만 변경하면 한글은 기본 정해진 폰트로 표시가 되겠죠. 기본 정해진 폰트는 파이어버그와 같은 웹개발 툴을 이용해서 어떤 것인 지 확인해보시면 알 것같네요. :)

  • http://skotlex.dominohosting.kr skotlex

    안녕하세요! 다른게 아니라 저번에 포스팅 하신것중에 플러그인을 이용한 폰트의 이미지화로 기본폰트를 바꾸는 것을 봤는데요. 생각해보니 본문에 나와있는 명령어로는 본문 글자밖에 바뀌지가 않더라고요. 제 블로그의 메인화면에서 우측 카테고리나 최근 글의 내용들도 해당 폰트로 바꾸고 싶은데 어떤 명령어를 추가시켜야 할까요?

    덧. 팬 페이스북 말고 개인페이스북 주소좀 알려주시면 감사하겠습니다 (_ _) 메일로 확인해보니 팬 페이스북이었네요!; 좋은하루되세요 :)

    • http://www.hwangc.com HwangC

      모든 영역에는 해당 영역을 꾸며주는 스타일이있습니다. 파이어버그 등을 사용해서 확인해보세요. 그 스타일에 정의된 클래스나 아이디에 폰트를 적용하시면 될것같아요. 그리고 페이스북 팬페이지 좋아요 하셨으면 제가 찾아볼게요 :)

  • yallo

    정말 감사합니다! 황쌤 덕분에 웹 생초보인 제가 사이트를 만들게 되었어요 :) 질문이 있는데요, 글자 크기 적용하는 css 소스 알려주실 수 있나요?
    다음체 적용은 되었는데 글자크기가 커서 왕부담.크…

    • http://www.hwangc.com HwangC

      안녕하세요!

      좋은 말씀 감사합니다. :)
      cufon을 적용한 스타일의 글씨 크기는 기본적인 스타일 수정으로 가능합니다.
      h1 태그에 대해 cufon을 적용하셨으면 아래와 같이 테마의 style 파일에 font-size 스타일을 수정하시면 되겠죠. :) 

      h1 {
   font-size: 50px;
}
      • yallo

        에디트메뉴에서 테마 스타일 시트를 찾아 수정하려고 보니

        You need to make this file writable before you can save your changes. See the Codex for more information.

        요로코롬 나와있는데요, 어디서 바꿔야 홈페이지 전체에
        제가 원하는 한글폰트로 바꿀 수 있을까요?

        • http://deleted yallo

          파일질라를 통해 767로 퍼미션 설정하였는데..
          점점 미궁속으로 빠져드는…@_@
          도와주세요 흑.

          • http://www.hwangc.com HwangC

            테마 폴더에 있는 style.css파일을 수정하시면 될거에요. 테마 전체의 파일 퍼미션을 변경해보세요. (..wp-content/themes/exampletheme 이라면 exampletheme 폴더의 퍼미션)

  • builkis

    안녕하세요 블로그를 보고 워드프레스에 입문한 초보입니다.
    블로그 전체의 글꼴을 바꾸고자 다음체를 받아 설치까지 했으며 all-in-one cufon 설정에서 Daum_Regular 폰트페밀리에 체크하고 업데이트옵션을 누르는데 권한이 없다고 뜹니다.
    다른 테마나 플러그인은 설치가 잘 되는데 왜 권한이 없다고 하는지 모르겠습니다. 아파치는 아니구요.

    • http://www.hwangc.com HwangC

      위에 몇몇분도 관련된 내용에 대해서 문의를 주셨는데 해결이 되셨는 지 모르겠네요. 파일 퍼미션 문제일 것같습니다. 여기를 참고해보세요. (http://codex.wordpress.org/Changing_File_Permissions )
      …wp-content/plugins/all-in-one-cufon 폴더와 …wp-content/plugins/cufon-fonts 폴더의 퍼미션을 755로 변경해보시고 테스트해보세요. 그래도 문제가 있다면 All in one cufon만 켜고 다른 플러그인을 모두 비활성화하시고 테마도 기본테마 twentyeleven으로 변경해서 테스트 해보세요.

  • 루이

    제가 테스트 하려고 한 사이트에 적용이 안되서 싹 지우고 다시 했더니 적용이 됩니니다. 요즘 많은 도움을 이쪽에서 보고 배우고 갑니다. 감사합니다.

    자기가 쓴 포스트나 아니면 제목등에 대한 태그는 잘 먹습니다.
    하지만 전체 태그는 안먹어요~! 몇번이고 했는데 안먹는데 이유가 뭘까요?
    Cufon(‘body’, {fontFamily:’Daum_Regular’});

    따로 다른것으로 해봐야 할까요?
    제가 유료테마를 사서 거의 다 완성을 했는데 문제는 자체에 cufon에 대한 옵션이 없더군요~! 오로지 구글폰트만 갔다 쓰는거랴 애로사항이 많았습니다.

    지금은 기본 테마에서 테스트를 여러번 한 상태입니다. 바로 유료테마 적용을 해봐야 겠네요~! 전체 부분에 태그가 안 먹을때 다른 방법이 있으면 알려주세요~~!
    좋은 밤 되세요

    • http://www.hwangc.com/ HwangC

      아래 댓글에서 fontFamily라고 되어있었네요. font-family로 수정했습니다. 다시 한번 수정해보세요. :)

      • 루이

        1…이상하네요 기본자체 테마에서도 전 왜 Cufon(‘.entry-title, h2, .widget-title’, {fontFamily:’Daum_Regular’}); 이것은 적용되는데 “전체태그”는 적용이 안되요~! 머가 문제인지 ㅋㅋ

        2… 님께서 설명해주신되로 다음서체를 만들어서 적용은 되는데 네이버나눔글꼴도 만들어 적용했더니 나눔글꼴은 적용이 안되요 ? 될려면 다 된던가? 안되면 다 안되야 하는데 어느것은 되고 안되니 헷갈리네요 ㅜㅜ 혹시 네이버나눔글꼴도 만들어주실수 있나요? 제가 잘못만들었나 …! 워드프레스가 플러그인의 궁합이 중요한가봐요~~!

        3. 혹시 포트폴리오부분에 사용할수 있는 플러그인이 있으면 추천좀 해 주세요~! 사진과 영상을 같이 넣어 볼수 있었으면 더 좋고요~~

        쓰다보니 질문이 많네요~~! 편한부부난 대답해 주세요~~! 황씨님 ^^
        요즘 들어 님 블러그에 자주 와서 공부 많이 하고 갑니다.
        항상 감사드려요 ^^

        • http://www.hwangc.com/ HwangC

          1. Twenty twelve에서 all in one cufon 플러그인을 사용하여 다음체를 적용한 화면입니다. Cufon(‘body’, { fontFamily: ‘Daum_Regular’ }); 을 입력하니 잘 되네요.
          2. 나눔글꼴 파일이 안만들어지시면 http://www.hwangc.com/wordpress-korean-font-in-5-min/ 를 참고해서 font-face로도 한번 해보세요.
          3. 포트폴리오에 라잇박스(참고: http://www.hwangc.com/wordpress-12-best-lightbox/)나 갤러리 플러그인 등을 사용하면 좋겠죠. 갤러리 NextGen(http://wordpress.org/extend/plugins/nextgen-gallery/)이 유명하지만 워드프레스 창고( http://wordpress.org/extend/plugins/ )에 다른 것들도 많이 있으니니 검색해서 몇가지 테스트 해보세요. :)

          • http://www.hwangc.com/ HwangC

            다음체를 적용한 화면입니다.

          • 루이

            감사합니다. 친절한 답변 정말로 도움 많이 되었습니다. 좋은 주말 되십시요

            • http://www.hwangc.com/ HwangC

              좋은 질문 감사합니다. 저도 조금 헷갈렸던 부분이 있었는데 다시 테스트 하면서 명확해지네요. :) 그럼 즐거운 주말 되세요!

  • http://www.facebook.com/raehyung Tae Hyung Kim

    좋은 정보 감사합니다., 저같은 경우에는 Chrome을 사용하였는데 All-in-one cufon 셋팅을 할 수가 없더군요. 또한, 프리미어 테마를 이용하기에 CSS편집이 자유롭지가 못하여 어려움이 많습니다..ㅠㅠ

    • http://www.hwangc.com/ HwangC

      크롬 브라우져와 all in one cufon 플러그인 셋팅과의 관련성이 있는 지 모르겠네요. 저는 문제가 없었던 것으로 기억합니다. 프리미엄 테마에서 css편집은 자식테마를 사용하시거나 테마에서 custom css 옵션을 제공한다면 그것을 활용해보세요. :)

  • Pingback: 워드프레스 한글 폰트 5분안에 변경하기 | Now is Good

You might also like...

ajax-music

음악을 들으며 페이지 로딩을 하고싶을 때..

Read More →