블로그 제목이 평범하거나 남들 다하는 물결플래시이면 식상하죠?
이제 개성만점 웹폰트로 블로그 제목을 꾸며봅시다!

그럼 준비해야할 것: 웹폰트 파일(.eot), 메모장

여기서 잠깐!
왜 일반 폰트 파일(ttf)가 아니라 웹폰트(eot)여야 하는지 알고 계시나요?
일반 폰트파일로 적용하면 그 폰트파일이 컴퓨터에 설치된 사람들에게만 보이는 것이랍니다.
간단하게 말하면, 일반 폰트파일로 적용하면 제 컴퓨터에서만 보이는 것.
하지만 웹폰트로 적용하면 모든 사람들(IE)에게 보이는 거에요~


자, 이제 웹폰트를 준비하셨나요?
제 블로그 제목에 적용된 폰트는 <나눔손글씨 펜체>입니다.
이제 이 폰트 위주로 포스팅하겠습니다.


1. 적용하고 싶은 웹폰트를 찾습니다.
제가 업로드할 폰트는 <나눔손글씨 펜체> 입니다.



2. '관리자 페이지' - '스킨' - 'HTML/CSS' - '파일 업로드' 로 갑니다.
np.eot 를 '파일업로드'로 업로드 합니다.

 


3. 'HTML/CSS 편집' - 'style.css' 로 들어갑시다.
맨 윗부분에 "나는 이 사이트에다가 이 웹폰트를 적용하겠다!" 라고 써줘야 하는데요. 물론 이렇게 한국말로 써넣으면 컴퓨터가 못알아보겠죠?
밑의 파란 글상자에 있는 소스를 넣어줍시다.

넣을 소스.txt

 

@font-face{font-family:나눔손글씨; src:url(./images/np.eot); }

 

 



4. 이제 가장 난감한 부분인데요. 포스트 제목을 나타내는 부분이 스킨마다 다 달라서요.
일단 제 스킨 기준으로 설명하겠습니다만,, 보통 포스트 부분의 h2 정도일거에요.
(도저히 모르시겠다는 분들은 댓글에 질문해주세요^^)

찾으셨으면, 이제 타이틀 폰트를 나눔손글씨로 바꿔야 하는데요.
밑의 사진에서 드래그한 내용의 마지막 줄을 보시면 변경한거 보이시죠?
이런 식으로 본래 폰트에서 나눔손글씨로 바꿔주시면 됩니다.

 


저장하시면 모든게 다 끝났습니다!! 저장 안 누르시면 안돼요!!

자, 나눔손글씨가 적용된 모습입니다~

 


화질이 구리지만.. 최선을 다해서 설명했답니다 ㅎㅎ;;
이해가 안가시거나 적용이 제대로 안되시면 언제든지 댓글로 질문하세요^^



신고

Comments

  1. 작은미소 2011.08.07 11:59 신고

    적용 잘됬습니다!! 다른 웹폰트로도 적용해볼게요~ㅎㅎㅎ
    추천한방!

    perm. |  mod/del. |  reply.
  2. BlogIcon Kasiwazaki Sena 2011.08.07 12:58 신고

    블로그에 여러가지 폰트를 적용하는 것은 꾸미는데 유용하지만...
    그 글씨체를 마음에 들어 하지 않는 분들도 있어서 저는 그냥 기본 글꼴을 준수 합니다. ^^*

    킴스보드 인가... 어떤 분이 플래시 연동으로 제목 꾸미는 것을 올린 것이 있습니다.
    어떠한 티스토리 블로그 사용자도 그것을 활용하고 계시니...찾아 보고 적용 하는 것도 괜찮겠네요.
    역동적인 제목도 나름대로 보기 좋습니다.

    perm. |  mod/del. |  reply.
    • BlogIcon 키리냐가. 2011.08.07 13:06 신고

      플래시 연동으로 제목 꾸미는것,, 혹시 물결 플래시를 말하시는건가요? 물결치는 것처럼 제목을 플래시로 꾸미는 거,, 그것도 예쁘죠^^ 조언 감사합니다!!

  3. BlogIcon 새날이 오면 2011.08.07 13:34 신고

    좋은글 잘보았습니다.
    추천한방 쏴 드립니다.^^

    perm. |  mod/del. |  reply.
  4. BlogIcon 너돌양 2011.08.07 14:27 신고

    저도 기회되면 적용해보아야겠어요^^

    perm. |  mod/del. |  reply.
  5. BlogIcon 백전백승 2011.08.07 19:05 신고

    제목을 나눔고딕이 아닌 다른 웹폰트를 하는 경우는 처음 보았네요.

    perm. |  mod/del. |  reply.
  6. 2011.08.08 08:15

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • BlogIcon 키리냐가. 2011.08.08 20:08 신고

      친추 했습니다~^^ 내일 저녁때쯤에 대기하고 있겠습니다ㅎㅎ 근데 왜 안될까요?;;

  7. 2012.01.30 16:52

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • BlogIcon 키리냐가. 2012.02.01 16:55 신고

      이게 스킨에 따라 방법이 달라져서요..
      답변해드리기가 좀 곤란하네요;;
      포스트처럼 style.css를 수정하면 되는 스킨도 있고, article.css 이나 다른 css를 수정해야되는 스킨들도 있어서요.
      어떤 스킨을 사용하고 계시나요?

  8. BlogIcon 청백­ 2012.09.05 10:24 신고

    와우 ^.^
    유용한 글이네요 ! 잘보고갑니다

    perm. |  mod/del. |  reply.
  9. 2013.01.23 15:54

    비밀댓글입니다

    perm. |  mod/del. |  reply.
    • BlogIcon 키리냐가. 2013.03.31 16:56 신고

      블로그 본문 타이틀 부분이 스킨마다 다 제각각이라서요
      ctrl + f 로 titlewrap 을 검색해보셔도 도저히 모르시면 어떤 스킨 쓰시는지 알려주세요~

What's on your mind?

댓글 입력 폼