블로그에 유용한 태그 3 - 티스토리 블로그에 웹폰트 적용하기

2010. 9. 7. 02:13IT/Tistory Tips

** 꽤 지루한 글이 될 것 같습니다. 웹폰트에 관심 없으신 분은 읽지 않으셔도 좋습니다. **

이 글이 블로그에 유용한 태그라는 범주에 포함되는지 아닌지 모르겠다. 티스토리가 아닌 다른 블로그엔 적용해보지 않아서 사용할 수 있는지 없는지도 알지 못한다. 어쨌든, 티스토리 블로그 또는 개인 홈페이지에선 적용할 수 있다.

인터넷을 돌아다니다 보면 웹폰트라는 단어를 볼 수 있다. 쉽게 생각하면 싸X월드 글꼴과 비슷한 것이다. 도토리를 주고 글꼴을 구매하면 자신의 미니홈피를 표시하는 글꼴이 바뀐다. 이와 비슷하게 블로그 스킨(skin.html/ style.css)을 만들 때도 내 블로그를 표시할 특정 글꼴을 사용하도록 지정한다. 그러면 내 블로그를 방문하는 사용자의 컴퓨터에 내가 지정한 글꼴이 설치되어 있을 때 그 글꼴로 블로그가 표시된다. 그러나 내 블로그에 접속한 손님의 컴퓨터에 내가 블로그 스킨에서 지정한 글꼴이 없으면 손님 컴퓨터의 시스템 글꼴 또는 웹 브라우저에서 지정한 글꼴로 표시된다.

예를 들어 내 블로그(/'pəlp/)는 Vista/7의 기본 글꼴인 맑은 고딕을 사용하도록 지정되어 있지만, XP 운영 체제를 사용하며 맑은 고딕 글꼴이 설치되어 있지 않은 시스템에선 맑은 고딕이 아닌 다른 글꼴로 표시된다. 웹폰트는 내 블로그를 방문하는 손님의 컴퓨터에 내가 지정한 글꼴이 있든 없든 관계없이 내가 지정한 글꼴로 블로그를 표시하는 방법이다. 즉, 웹폰트를 사용해서 맑은 고딕 글꼴을 지정하면 맑은 고딕이 설치되어 있지 않은 XP 시스템에서 내 블로그를 방문해도 맑은 고딕 글꼴로 표시된다. 대강 상대방 휴대전화에 표시될 내 이름을 지정하는 서비스와 비슷하다.

정리하면 웹폰트는 내 블로그를 방문한 손님에게 보여줄 글꼴을 지정하는 것이며 상대방의 컴퓨터에 내가 지정한 글꼴이 있는지 여부와는 상관없이 내가 원하는 글꼴로 나타난다. (주의: 웹폰트는 누구나 글꼴 파일을 내려받고 이용할 수 있기 때문에 저작권이 있는 글꼴은 사용하면 안 된다.)

웹폰트는 원래 IE에서만 지원하던 기능인데 CSS3에 ttf 파일을 사용한 웹폰트 기능이 추가되면서 지금은 Firefox, Opera, Chrome, Safari 등 주요 웹 브라우저에서 모두 지원한다. 그러나 티스토리에 적용한 웹폰트는 IE와 Chrome, Safari, Opera에서만 지원되며 또 Opera에서는 Opera 설치 폴더 경로에 한글 또는 다른 유니코드 문자가 없을 때만 완벽히 지원한다. 에서는 거의 완벽하게 지원하지만, 간혹 제대로 적용되지 않은 채 표시되는 부분도 있고 Firefox에서는 한글 글꼴은 적용되지 않고 영문 글꼴에 한해서만 적용되며 그나마도 적용될 때가 있고 되지 않을 때가 있어서 가장 제한적으로 적용되었다.Firefox는 크로스 도메인 문제때문에 티스토리 블로그만으론 웹폰트가 표시되도록 설정할 수 없다.<참고 1> 어쨌든, 웹폰트가 어떤 것인지 대강 알아봤으니 실제 적용 방법을 알아보자.

1. 웹폰트로 사용할 글꼴 준비하기 - ttf, eot 변환

웹폰트를 적용하려면 일단 웹폰트로 사용할 글꼴을 정해야 한다. 그런데 여기서 약간의 문제가 발생한다. 우리가 보통 사용하는 글꼴은 ttf(TrueType)나 otf(OpenType) 형식이다. Firefox, Opera, Chrome, Safari에서는 이 형식을 그대로 웹폰트로 지정할 수 있다. 그러나 이렇게 지정하면 정작 대다수가 사용하는 IE에서는 웹폰트로 표시되지 않는다. 내 블로그에 접속하는 IE 사용자에게도 웹폰트가 표시되게 하려면 ttf 파일을 eot(Embedded OpenType) 형식으로 변환해야 한다. 보통 ttf 파일을 eot 파일로 변환할 땐 WEFT(Web Embedding Font Tool)라는 프로그램을 사용한다. 그러나 WEFT는 설치 및 사용 방법이 조금 복잡하고 또 미리 지정한 특정 사이트에서만 사용할 수 있다는 단점이 있다. 싸X월드 글꼴을 다른 사이트에 이용할 수 없는 것과 같다. 이런 불편함을 없애기 위해 여기선 EOTFast란 프로그램을 사용할 것이다. EOTFast은 ttf 파일을 eot로 변환하는 프로그램으로 설치할 필요가 없으며 단 1초 만에 ttf를 eot로 바꿀 수 있다. 또 eot 파일을 사용할 사이트를 지정하지 않으므로 주소에 제한 없이 어디서나 변환한 글꼴을 사용할 수 있다. 일단 eotfast-2-22-10.zip 파일을 내려받아 압축을 푼다. 그럼 위 그림과 같은 파일이 나타난다.

여기서 우리에게 필요한 파일은 그 중 EOTFAST-1.exe라는 파일이다. 프로그램 사용 방법은 아주 간단하다. 심지어 프로그램을 실행할 필요조차 없다. 변환할 ttf 파일을 EOTFAST-1.exe 파일 위에 Drag & Drop (끌어놓기) - 마우스로 변환할 ttf 파일을 클릭하고 왼쪽 단추를 계속 누른 채로 마우스를 이동해서 EOTFast-1.exe 파일 위로 옮긴다. 그다음 마우스 왼쪽 단추에서 손을 떼면 - 하면 잠깐 검정색 창이 나타났다 사라지고 그 후 자동으로 eot 파일이 생성된다. 위 영상을 보면 이해가 빠를 것이다. ttf 파일과 그 파일을 eot로 변환한 두 개의 글꼴 파일이 준비되었으면 1단계 준비가 끝났다.

단, 모든 ttf 파일이 eot 파일로 변환되는 것은 아니다. 이는 WEFT를 사용해도 마찬가지다. eot 파일로 변환되지 않는 글꼴은 IE에서 웹폰트로 표시할 수 없으니 사용하지 않는 편이 낫다.

2. 티스토리 블로그에 글꼴 파일 올리기

두 번째 단계는 준비한 ttf와 eot 파일을 티스토리 블로그에 올리는 것이다. 티스토리 스킨 수정을 몇 번 해본 사용자라면 쉽게 올릴 수 있지만, 혹시 모르니 간단히 집어보고 넘어가자.

일단 자신의 티스토리 블로그 관리자로 이동한다. 그다음 메뉴의 [스킨] - [HTML/CSS 편집]을 클릭한다. 스킨 편집 화면이 나타나면 [파일 업로드] 탭을 클릭하고 [파일업로드] 단추를 눌러서 1단계에서 준비한 ttf와 eot 파일을 올린다. 오른쪽 그림처럼 목록에서 방금 올린 ttf, eot 파일을 확인할 수 있으면 끝이다. 이제 스킨을 수정할 차례다.

3. 티스토리 블로그 스킨 수정하기

세 번째는 티스토리 블로그 스킨 수정이다. 앞서 올린 ttf, eot 파일에 글꼴 이름과 속성을 부여해야 한다. 앞에서 잠깐 언급한 것처럼 웹폰트는 CSS3에 포함된 것으로 티스토리 블로그의 style.css 에서 지정한다. 물론 style 태그를 사용해서 skin.html에 추가할 수도 있지만, 스타일시트를 사용하는데 굳이 그렇게 할 필요는 없다.

2단계에서처럼 HTML/CSS 편집 화면으로 이동한다. 화면 아래의 style.css 부분으로 이동하고 젤 윗부분에 아래 문구를 입력한다.

@font-face {
  font-family: "글꼴 이름";
  src: url(./images/글꼴파일.eot);
  src: local("컴퓨터의 글꼴 이름"), url(./images/글꼴파일.ttf) format("truetype");
}

각 부분에 대해 간단히 살펴보자. 일단 @font-face는 웹폰트를 지정하기 위한 명령이라 생각하면 된다. 명령 옵션을 지정하기 위해 { 를 사용한다. 다음 줄엔 웹폰트로 사용할 때의 글꼴 이름을 지정한다. 이 부분은 원래 글꼴의 이름과는 상관없이 블로그 주인이 원하는 이름을 입력한다. 여기 입력한 이름이 나중에 웹폰트를 적용할 때 사용된다. 그러나 원래 글꼴 이름과 다른 이름으로 지정할 것을 추천한다. 만약 원래 ttf 글꼴 이름이 '바보' 였는데 여기서도 '바보'라고 지정하면 웹폰트가 아닌 컴퓨터에 설치된 글꼴을 불러와서 페이지를 표시하므로 나중에 내가 지정한 웹폰트가 제대로 적용되는지 확인하기가 곤란하다. 그러니 원래 글꼴 이름이 '바보'라면 여기선 '바보1'처럼 다른 이름을 사용할 것을 권장한다.

세 번째 줄은 IE에 표시할 웹폰트를 지정하는 부분이다. 글꼴파일.eot 부분에 앞에서 티스토리 블로그에 올린 eot 파일 이름을 입력한다.

네 번째 줄은 IE가 아닌 다른 브라우저 - Firefox, Opera, Chrome, Safari 등 - 에 표시할 웹폰트를 지정하는 부분이다. IE 부분과 달리 local("컴퓨터의 글꼴 이름") 이라는 부분과 format("truetype")이라는 부분이 있다. local은 웹폰트를 사용하기에 앞서 사용자의 컴퓨터에 특정 글꼴이 있으면 그 글꼴을 우선으로 사용하도록 지정하는 것이다. 예를 들어 local("왕바보") 라고 지정하면 내 블로그에 접속하는 손님의 컴퓨터에 '왕바보'라는 글꼴이 설치되어 있을 때 웹폰트를 따로 내려받지 않고 설치된 글꼴을 바로 사용해서 페이지 표시 시간을 줄인다. "컴퓨터의 글꼴 이름" 부분에 ttf 파일의 원래 글꼴 이름을 입력하면 된다. 글꼴 이름은 탐색기에서 ttf 파일을 더블클릭하면 확인할 수 있다.

마지막 format("truetype")은 사용하는 글꼴 형식을 지정하는 부분이다. 보통 ttf 글꼴을 사용할 테니 format("truetype")을 그대로 입력하면 된다. 만약 otf 글꼴을 사용할 땐 format("opentype")라고 입력한다. 이것 외에도 font-weight와 font-style 속성을 사용할 수 있다. 두 속성은 <span style="">에서와 같은 방식으로 지정하면 된다.

굳이 style.css를 수정하지 않고 skin.html 파일을 수정하겠다면 아래의 내용을 <head></head> 사이에 입력한다.

<style type="text/css">
@font-face {
  font-family: "글꼴 이름";
  src: url(./images/글꼴파일.eot);
  src: local("컴퓨터의 글꼴 이름"), url(./images/글꼴파일.ttf) format("truetype");
}
</style>

4. 실제 글에 웹폰트 적용하기

이제 실제 글에 웹폰트를 지정할 차례다. 앞에서 다룬 span 태그를 사용하면 내가 원하는 특정 부분에 웹폰트를 지정할 수 있다. 간단한 예를 살펴보자.

<span style="font-family: action; color: orange;">
Let me not to the marriage of true minds

Admit impediments; love is not love
Which alters when it alteration finds,
Or bends with the remover to remove.

Oh, no, it is an ever-fixed mark,
That looks on tempests and is never shaken;

It is the star to every wand'ring bark,
Whose worth's unknown, although his height be taken
Love's not Time's fool, though rosy lips and cheeks
Within his bending sickle's compass come;

Love alters not with his brief hours and weeks,
But bears it out even to the edge of Doom.

If this be error, and upon me proved,
I never writ, nor no man ever loved.
</span>
Let me not to the marriage of true minds

Admit impediments; love is not love
Which alters when it alteration finds,
Or bends with the remover to remove.

Oh, no, it is an ever-fixed mark,
That looks on tempests and is never shaken;

It is the star to every wand'ring bark,
Whose worth's unknown, although his height be taken
Love's not Time's fool, though rosy lips and cheeks
Within his bending sickle's compass come;

Love alters not with his brief hours and weeks,
But bears it out even to the edge of Doom.

If this be error, and upon me proved,
I never writ, nor no man ever loved.

위의 예는 <span style="font-family: 글꼴 이름">를 사용해서 1~3단계에서 지정한 웹폰트 (action)나눔 손글씨 붓체를 사용한 것이다. 가독성은 떨어지지만, 확실히 웹폰트가 적용된 것을 확인할 수 있다. IE, Opera, Chrome에서 적용된 것을 확인했고 안타깝게도 Firefox에선 적용되지 않았다. 앞에서도 이야기했듯이 Firefox는 영문 웹폰트만 적용되는 것 같고 그마저도 될 때도 있고 안될 때도 있다. 어쨌든, 웹폰트는 span뿐 아니라 div, p 등 다양한 태그와 함께 사용할 수 있다.

웹폰트가 상당히 매력적인 기능임엔 틀림없지만, 어느 것이나 그렇듯 만능은 아니다. 일단 웹폰트는 블로그를 방문할 때 글꼴을 내려받아서 해당 글꼴을 사용한다. 글꼴의 크기가 크다면 처음 접속 시간이 오래 걸린다. 또 이 글에서 소개한 방법은 IE에만 적용하는 것이 아니라 다른 브라우저에서도 함께 적용되는 방법이며 ttf나 otf 글꼴을 그대로 사용하기 때문에 무료로 배포된 글꼴이 아닌 저작권이 있는 글꼴을 사용하면 안 된다. 마지막으로 내가 확인한 바로는 티스토리 블로그에 적용한 웹폰트를 완전하게 지원하는 브라우저는 IE와 Opera밖에 없다. Chrome은 거의 완전하게 지원하고 Firefox는 아주 빈약하게 지원한다. Safari는 확인해보진 않았지만, 거의 완전하게 지원할 것 같다.

어쨌든, 웹폰트는 내 블로그 게시물의 소제목 등 특정 글자를 강조할 때 유용하게 쓸 수 있다.

웹폰트 적용에 관한 내용은 @font-face Rule이나 @font-face에서 추가로 확인할 수 있다.


  • 이전 댓글 더보기
  • 프로필사진
    알 수 없는 사용자2010.09.07 20:38

    배너를 하나하나 만들어야 겠어요 레뷰가 추천한사람 명단을 ㅜㅜ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.07 23:02 신고

      이젠 누가 추천했는지도 알려주지 않더라구요. 그냥 내 글 추천한 사람 최근 10명만 표시하더군요. 뭔가 수익 구조를 개선하는 건설적인 방향으로 갔으면 하는 바람이지만, 사용자의 몫을 먼저 줄이겠다는 여러 가지 시도 - 특히나 미리 공지나 알림도 거의 없이 - 가 좋아 보이진 않습니다. 마음 비우고 살아야겠어요^^

    • 프로필사진
      알 수 없는 사용자2010.09.07 23:22

      저는 수익이 줄지는 않았습니다;;
      다만 추천해 주신분들에 비해 제가 들어가기가 힘들어 하나하나 찾는동안 저에게 주어진 시간은 없죠;;
      하루에 20~30분씩 들어가 추천을 누르고 댓글을달았는데;
      이제는 그렇게 하다간 학업에 지장을 줄뿐만아니라 밤을 새야겠고,, 암튼 힘든 생활이 지속될 것 같습니다

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.08 01:03 신고

      무리하진 마세요~ 블로그도 중요하지만 그래도 건강, 학업, 그 외의 생활이 먼저잖아요^^ 전 예전에 제 글을 추천해주신 분들 전부 - 몇 분만 빼고 - 즐겨찾기 해놨었는데 엄청나더라구요. 지금은 그분들 중 요일별로 선택해서 들어가봅니다 ㅎㅎ

  • 프로필사진
    알 수 없는 사용자2010.09.08 02:34

    흑흑 편집의 길은 멀군요 ㅠ
    혹시
    윗 글과 아랫 글의 간격 조절 어떻게 하면 되는시 아시나요? 분명 200% 조절하는거 클릭했는데 그대로에요 ㅠ
    크기 9 굴림체 (기본설정) 에서는 되는데
    돋움으로 바꾸고 10으로 바꾸면 안되네요 ㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.08 02:43 신고

      <span style="line-height: 200%;">간격 조정할 내용</span>

      이렇게 조정하시면 됩니다. p 태그에서도 마찬가지 방법으로 사용할 수 있습니다.

      혹시 HTML 방식에서 위 태그를 입력했는데도 안되면 다시 댓글 남겨주세요^^

    • 프로필사진
      알 수 없는 사용자2010.09.08 21:55

      ㄱ-
      어려워→여↓ㅋㅋ
      그래도 고맙습니다~ㅋ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.08 23:46 신고

      이유는 모르겠지만, 잘 해결되었으면 좋겠네요^^

    • 프로필사진
      알 수 없는 사용자2010.09.09 21:45

      넹넹^^ 고맙습니다 ㅋㄷ

  • 프로필사진
    Favicon of https://wooubistudio.tistory.com BlogIcon wooubi2010.09.10 10:27 신고

    너무 감사감사
    좋은 정보 감사드려요
    저에게 필요한 정보네요~ ㅋㅋ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.10 12:24 신고

      네, 다음에 또 새로운 정보가 있으면 더 좋은 글로 찾아뵙겠습니다~

  • 프로필사진
    알 수 없는 사용자2010.09.24 16:01

    앙 저는 왜 적용이 안되죠.. 어느 부분이 잘못됬는지 ..모르겠네요 ㅜ,ㅜ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.27 17:19 신고

      어떤 방식으로 적용하셨는지 자세히 알려주시면 한번 살펴보겠습니다. 글꼴 변환 및 업로드, 스킨 수정 두 과정이 모두 잘 되어야 적용이 되거든요~

  • 프로필사진
    Favicon of https://eyewear.tistory.com BlogIcon 행복한안경사2010.10.10 14:46 신고

    쉽게 성공했네요..자세한 설명 감사합니다..^^

  • 프로필사진
    Favicon of https://blacktv.tistory.com BlogIcon 흑백테레비2010.10.13 13:43 신고

    감사합니다. 큰 도움됐습니다. 제 블로그 제목을 덕분에 바꿨네요.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.10.23 00:57 신고

      와 글 제목 바꾸신건가요? 어떤 글씨체인진 모르겠지만, 블로그 구성이랑 잘어울리네요^^ 혹시 나중에 댓글 보시면 글꼴 이름이랑 내려받을 수 있는 곳 좀 알려주세요!! 아, 물론 유료 글꼴이면 이름만 알려주세요~

    • 프로필사진
      Favicon of https://blacktv.tistory.com BlogIcon 흑백테레비2010.10.23 23:34 신고

      네이버 무료 폰트입니다. 나눔고딕의 두번째 버전이죠. 나눔붓체입니다. ^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.10.24 17:10 신고

      붓체 펜체 둘 다 아주 매력있네요. 제 블로그 제목도 좀 바꿔볼까요 ^^

  • 프로필사진
    Favicon of https://oiseau.tistory.com BlogIcon 은하수 방랑자2010.10.16 21:28 신고

    도움이 많이 되었습니다.
    그런데 CSS를 수정하면 적용이 되지만 HTML을 수정하면 적용이 안되는데 왜 그런거죠?
    CSS를 수정하면 오른쪽 사이드바가 이상해져서 HTML을 수정하려고 하거든요..

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.10.23 00:59 신고

      흡, 왜 그럴까요^^;;
      이론상으론 스타일 태그로 적용되는게 정상인데, 솔직히 이야기드리면 저도 잘 모르겠습니다 ㅠㅠ
      좋은 답 못드려서 죄송해요. 나중에 원인 찾으면 꼭 알려드리겠습니다.

      어쩌면 벌써 해결하셨을지도 모르겠네요^^;;

  • 프로필사진
    Favicon of https://dongri.tistory.com BlogIcon 동그리~☆2010.10.21 23:57 신고

    정말 도움이 많이 되었습니다...^^;;
    따라하기 쉽게 깔끔하게 정리해주셨네요...
    잘 보고 갑니다...

  • 프로필사진
    Favicon of https://haedamsol.tistory.com BlogIcon 해담솔2010.10.22 13:07 신고

    이런 방법이 있었네요...감사합니다. ^^

  • 프로필사진
    Favicon of https://oiseau.tistory.com BlogIcon 은하수 방랑자2010.11.01 02:26 신고

    그냥 포기했어요ㅎㅎ
    나중에 조금 더 공부해서 스킨 손좀 보고 할때 다시 한번 해보려구요.

  • 프로필사진
    알 수 없는 사용자2010.11.20 23:20

    그냥 글을 작성하면 변경한 폰트가 보이는데, 편집기 통해서 볼드나 색을 넣으면 적용이 안되네요.. 그런 부분들은 직접 HTML에서 수정 해야 하나요? 그리고.. 댓글이나 글제목 등은 적용이 안되던데 다른 부분을 또 수정 해야 하나요? 너무 어려워요..ㅠ_ㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.11.22 08:23 신고

      편집기를 통해서 볼드나 색을 넣으면 그 즉시 새로 태그를 써서 이전에 적용했던 span 태그가 덧씌워지는 것 같습니다. 편집기에서 일단 세팅을 하고 그 다음에 HTML 방식으로 바꿔서 span 태그로 font-family를 적용해보세요.

      댓글이나 글 제목은 글을 쓸 때 적용하는 부분이 아니라 블로그 스킨을 수정해야 합니다. 블로그 관리 화면 스킨 수정에서 html/css를 직접 수정해야 하는데 잘못하면 블로그 자체가 이상해질 수 있으니 스킨에 사용하는 태그에 대해서 좀 공부하시고 하는게 낫지 않을까 싶습니다. ^^;;

  • 프로필사진
    알 수 없는 사용자2010.12.29 21:52

    안녕하세요^ ^
    컴퓨터에 나눔글꼴이 설치되어있지 않은 상태에서 해보았는데, 적용이 되지 않네요...ㅠ.ㅠ
    한 번 봐주실수 있으신지요?

    @font-face {
    font-family: "나눔고딕1";
    src: url(./images/NanumGothic.eot);
    src: local("나눔고딕"), url(./images/NanumGothic.ttf) format("truetype");
    }

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.01.02 18:39 신고

      글 쓸때 글꼴을 '나눔고딕1'로 잘 설정만 하셨다면 적용이 되야 할 것 같은데 왜 그런지 알 수가 없네요. 입력하신 태그에는 문제가 없습니다. 일단 url 부분에 상대 경로 말고 NanumGothic.eot와 NanumGothic.ttf의 절대 경로를 입력해보세요. IE, Opera, Chrome 등에서 모두 적용이 안되는지 확인을 해 보시는것도 좋을 것 같구요.
      말씀하신 상태에선 잘못된 것이 없어 보여서 뭐라 답을 못드리겠네요^^;;

  • 프로필사진
    알 수 없는 사용자2011.01.23 18:34

    글 쓸때마다 하나하나 적용시켜야 하는건가요?ㅜㅜ
    지금 있는글하고 메뉴하고 싹다 바꾸고싶은데 제가 잘못해서 그런건가요~?ㅋㅋ
    어쨌든 좋은정보 하나 알아갑니다. 감사합니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.02.08 11:55 신고

      일단 글꼴 태그 자체는 티스토리 스킨을 수정하셔야 합니다. 그다음 각 게시물에 적용할 땐 게시물의 HTML 모드에서 직접 글꼴을 지정하셔야 하구요.

      메뉴를 바꿀 땐 스킨의 CSS에서 메뉴에 사용하도록 지정된 글꼴을 바꾸셔야 합니다. 또 모든 게시글의 글꼴 역시 CSS에서 수정할 수 있을 것 같습니다.

      일단 스킨의 CSS와 HTML을 살펴보시고 하나씩 바꿔가며 미리보기로 확인하시는게 좋을 것 같습니다.

  • 프로필사진
    알 수 없는 사용자2011.04.09 17:16

    덕분에 웹폰트 적용 완료했습니다^^
    전에 썼던 글들에 일일이 태그 넣는 일만 남았네요,, 으앜;

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.04.10 02:32 신고

      축하드립니다~ 글에 일일이 태그 입력하려면 시간 한참 걸리겠는데요^^;;;

  • 프로필사진
    알 수 없는 사용자2011.06.16 18:10

    웹폰트에 관한 팁 잘보았습니다 ^_^ 근데 요새는 적용을 안하시나봐요?

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.06.16 19:03 신고

      얼마 전까지 나눔고딕 글꼴을 적용했었는데 아무래도 글꼴 불러오는 시간이 좀 걸려서 일단 적용하지 않고 있습니다. 나눔고딕에서 필요없는 글자를 좀 빼고 더 줄이면 될 것도 같은데 한 번 해봐야죠.
      한국어 글꼴은 대부분 크기가 커서 전체 글꼴로 사용하려니 좀 거슬리는 것 같습니다. 일단 어떤 글자를 많이 사용하는지 분석을 좀 해보고 안쓴는 문자는 다 빼버려야겠어요^^

  • 프로필사진
    알 수 없는 사용자2011.06.17 14:41

    저는 이전에는 이곳에서 폰트를 적용하고 있습니다.
    제가 아는 한으로는 이 곳에서 웹폰트를 서버에 저장하고 스크립트를 제공하는 것으로 보이는데요

    이 곳에서 제공하는 것에 차이점이라면 웹폰트 로딩전에도 텍스트를 보여준다는 것이 조금 좋은 것같습니다. 그런데 역시 웹폰트라 보니 로딩이 조금 느린 것은 감수해야 할 것 같습니다.

    pelp님이 말씀하신데로 티스토리에 적용하면 로딩 속도가 조금은 빨라질까요? 그리고 제가 알기로는 기존에 작성한 것에도 CSS만 적용하면 일괄적용되는 것으로 알고있는데 맞나요?

    궁금한게 많네요 ^_^ 제블로그에도 들러주세요
    onewaytrip.tistory.com

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.06.17 22:11 신고

      혹시 http://fontface.kr/ 을 말하시는 건가요? 링크 부분이 지워져서 어딘지 확실치가 않네요.

      fontface 사이트에서 제공하는 방식이 네이버에서 배포하는 글꼴 원본인지 수정본인지는 확실히 모르겠지만, 원본이라면 용량이 워낙 커서 글꼴 불러오는 시간이 지연되는 건 어쩔 수 없는 것 같습니다.

      개인적으론 글꼴 수정 프로그램을 사용해서 나눔고딕 등 글꼴을 완성형 글자, 조합형(ㄱ, ㄴ, 등), 한자 등으로 나누고 거기서 다시 단어에 사용되는 글자와 단어에 사용되지 않는 글자(뷁 등)를 구분하고 각각 다른 파일로 저장한 다음 해당 파일을 woff, eot 두 가지 형식으로 변환해서 적용하는 것이 글꼴 불러오는 시간이 가장 짧지 않을까 생각합니다. 다행히 나눔글꼴은 수정을 허용해서 저작권 문제 없이 수정한 글꼴을 웹폰트로 사용할 수 있을 것 같습니다.

      일단 IE 6 이후는 버전에 관계없이 eot를 지원하고 chrome, opera, safari 최근 버전은 모두 woff를 지원하니 eot와 woff 두 가지 만으로 웬만한 브라우저는 다 적용할 수 있을 것입니다. ttf를 eot, woff로 변환하는 과정에서 압축되면서 용량이 줄어드니 그만큼 로딩 시간도 줄어들구요.

      그다음에 앞에서 여러개로 자른 글꼴을 각각 나눔1, 나눔2, 나눔3 등과 같은 이름을 부여하고 CSS에 글꼴을 적용할 때 font-family:나눔고딕,nanumgothic,나눔1,나눔2,나눔3,sans-serif 등과 같이 적용하면 로딩 시간도 좀 줄지 않을까 싶네요. 다른 방법도 있을 것 같은데 아직까진 이 방법밖에 떠오르는게 없습니다.

      그리고 기존 작성한 글도 CSS 수정으로 새로운 글꼴을 적용할 수 있습니다. 예를 들어 body 부분의 font-family를 새로 적용한 웹폰트로 바꾸거나 article 부분만 바꾸는 등의 방법을 사용하면 블로그 모든 글 본문 글꼴이 바뀝니다.

      여행자님 블로그 종종 놀러가겠습니다^^ 즐거운 주말 보내세요!

  • 프로필사진
    알 수 없는 사용자2011.06.21 16:55

    우왕 이렇게 장문의 답글을! 감사드립니다. 지워진 링크는 fontface.kr이 맞습니다. 제가 생각하기에도 나눔글꼴을 공개이기 때문에 웹폰트로 사용할 수 있을 듯합니다. 다만 지금 적용한 것과 속도가 얼마나 차이가 날지 개선의 여지가 있을지를 몰라서요. 결정적으로 Circlash님의 방법을 적용하다가실패해서... 현재는 폰트페이스 방법으로 돌려놓은 상태 입니다. eot 파일로 변환은 성공했는데 적용하는데 제가 아직 실력이 부족해서 잘 적용이 안되더군요. (크롬, 익스플로러 확인) 혹여 시간이 되시면 확인을 부탁드려도 될까요?

    종종 들러주세요 ^_^ 늘 감사드립니다.

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.06.24 22:03 신고

      댓글 확인을 늦게 해서 이제야 블로그 확인해봤습니다.
      fontface.kr 방법을 사용하고 계시네요. 내려받은 자원을 확인해보니 IE8에선 eot, Chrome에선 woff, Opera에선 ttf를 사용하는군요. 파일을 내려받아 살펴보진 않았지만, 나눔고딕.ttf가 2.24MB인 걸 보니 자주 사용하지 않는 문자 일부를 삭제한 게 아닌가 싶은데요.

      크롬이나 IE8에선 글꼴이 크지 않아 얼마 걸리지 않지만, Opera에선 ttf라 좀 오래 걸리는 것 같습니다. 그래도 시간이 좀 지나니 웬만한 브라우저에선 모두 잘 표시되는군요.
      주말 잘 보내세요~

  • 프로필사진
    알 수 없는 사용자2011.06.27 09:34

    꼼꼼한 답변 감사드려요. circlash님 때문에 많이 배웁니다. 자주 들를께요^_^ 좋은 한주 되세요

  • 프로필사진
    Favicon of https://as1202.tistory.com BlogIcon 코드미뇽2011.10.12 20:25 신고

    설명을 자세히 써주셔서 불편함 없이 적용했습니다..

    좋은 포스팅감사합니다...

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.10.15 09:47 신고

      방문 감사합니다~
      잘 활용하시길!
      이번 주말도 즐겁게 활기차게 보내세요!!

  • 프로필사진
    Favicon of https://zoahaza.net BlogIcon 조아하자2014.05.21 23:39 신고

    우왕 저도 도전해봐야겠군요!!! 좋은 정보 감사합니다!

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2014.06.01 10:22 신고

      방문 고맙습니다.
      http://circlash.tistory.com/578
      http://circlash.tistory.com/686

      위 글도 같이 보시면 웹폰트 사용하는데 도움되실 겁니다^^
      좋은 하루 보내세요~