블로그에 유용한 태그 6 - 티스토리 블로그에 웹폰트 적용하기 (2)

2011. 4. 11. 12:18IT/Tistory Tips


블로그에 유용한 태그 3 - 티스토리 블로그에 웹폰트 적용하기 게시물에서 웹폰트 적용에 대해 이야기했다. 그때 이야기한 코드는 다음과 같다.

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

위 코드를 CSS에 추가하거나 style 태그를 사용해서 HTML 문서에 삽입하면 해당 웹폰트를 사용할 수 있다. 먼저 src: url('./images/글꼴파일.eot'); 부분이 IE8 이하의 웹브라우저에 적용되고 src: local('컴퓨터의 글꼴 이름'), url('./images/글꼴파일.ttf') format('truetype'); 부분이 Opera, Safari, Chrome, Firefox에 적용된다. (Firefox는 같은 도메인의 웹폰트만을 인식하므로 티스토리 블로그에 웹폰트를 사용할 땐 일반적으로 Firefox엔 적용되지 않는다.<참고 1>, <참고 2>)

여기서 짚고 넘어가야 할 몇 가지 문제가 있다. 먼저 최신 브라우저의 WOFF 형식 지원이다. WOFF는 웹페이지에서 사용하기 위한 글꼴 형식이다. 일반 트루타입(ttf) 글꼴을 gzip으로 압축한 형태으므로 eot 처럼 크기가 작아서 웹폰트로 사용했을 때 ttf 보다 로딩 시간이 훨씬 짧다. IE9에서 EOT(Embedded Opentype)과 함께 WOFF(Web Open Font Format)을 지원한다. FF 3.6, Chrome 6, Safari 6, Opera 11.1 이상에서도 WOFF를 지원하므로 최신 브라우저에 두루 적용할 수 있는 형식이다.

다음은 IE9의 호환성 보기 모드에서의 웹폰트다. 이 부분은 나중에 다시 이야기하겠다.

마지막은 로컬 글꼴 지정 문제다. 매킨토시에서 구동하는 Safari 브라우저는 보통 글꼴 이름이라고 이야기하는 Full name 대신 PostScript name을 글꼴 이름으로 사용한다. 따라서 매킨토시에서 구동하는 Safari 브라우저에선 Full name을 local에 지정했을 때 해당 글꼴을 불러올 수 없다. <참고 3>

또 글꼴 이름이 중복됐을 때도 문제가 생긴다. src:local('컴퓨터의 글꼴 이름')을 지정하면 사용자의 컴퓨터에 글쓴이가 의도한 글꼴이 설치되어 있을 때 웹폰트 대신 사용한다. 그런데 여기서 같은 이름의 서로 다른 글꼴이 설치되어 있을 때의 상황을 살펴보자. 만약 글쓴이는 '왕바보'라는 이름의 '왕바보' 체를 로컬에서 불러와서 사용하라고 지시했는데 사용자의 컴퓨터엔 '왕바보'라는 이름의 '정말 바보' 체가 설치되어 있다고 가정해보자. 이때 웹폰트의 local 선언은 글꼴 이름만으로 글꼴을 판단하므로 글쓴이가 의도한 '왕바보'가 아닌 '정말 바보' 체로 내용이 표시된다. (개인적인 생각으로 이런 상황은 일반적으로 일어날 수 있는 상황은 아니며 가능성의 문제다.)

그럼 해결해야 할 문제 역시 세 가지다. 먼저 WOFF. 앞서 말한 것처럼 WOFF는 모든 최신 브라우저에서 지원하는 형식이며 ttf보다 크기가 작으므로 가장 먼저 적용해야 할 형식이다. 두 번째는 IE9 호환성 보기에서의 웹폰트. 역시 뒤에서 이야기하겠다. 마지막 로컬 글꼴 지정 문제. 사실 로컬 글꼴 지정은 그리 큰 문제는 아니다. 우리나라의 매킨토시 사용자는 외국과 비교하면 그 수가 굉장히 적다. 적은 수의 맥 사용자를 고려할 것인가 말 것인가? 다음은 서로 다른 글꼴이 같은 이름을 쓸 가능성. 역시 거의 없다. 그렇지만, 적은 수의 맥 사용자에 대한 배려와 거의 가능성이 없는 같은 이름의 다른 글꼴 문제 역시 해결하려면 local을 사용하지 않거나 local에 글꼴에서 절대 사용할 것 같지 않은 문자를 추가하면 된다.

위의 세 가지 사항을 염두에 두고 웹폰트 적용 코드를 수정해보자. 웹폰트는 eot, woff, ttf, svg 형식을 모두 적용하도록 한다. 글꼴 형식 변환은 Font Squirrel @font-face Generator에서 해결할 수 있다. 일단 위 링크를 따라 Font Squirrel @font-face Generator로 이동한다. (* 이전에 소개한 EOTFASTsfnt2woff를 사용하면 웹서비스를 사용하지 않고 글꼴 형식을 바꿀 수 있다. java를 이용해서 ttf를 svg로 바꾸는 batik SVG Font Converter도 있는데 변환된 파일이 제대로 적용되지 않는 것 같다. FontForge를 사용할 수도 있다.)

[Add fonts]를 클릭해서 변환할 글꼴을 올리고 [Expert...]를 클릭한다. 그다음 빨간 네모 칸을 선택한다. Font format은 그림처럼 ttf, woff, svg, eot를 선택하고 Subsetting은 반드시 No Subsetting을 선택한다. 만약 한글 글꼴을 변환할 때 Basic Subsetting이 선택되어 있으면 한글은 모두 삭제되고 로마자 알파벳만 남는다. CSS Formats는 아래에서 설명할 것이니 아무것이나 선택해도 된다. 마지막으로 Agreement를 선택하고 [Download Your Kit]을 클릭해서 변환된 글꼴을 내려받는다. 다른 설정은 기본값으로 놔둔다.

Font Squirrel에서 내려받은 파일의 압축을 풀면 변환된 글꼴 파일과 CSS, HTML 등의 파일을 확인할 수 있다. 블로그에 유용한 태그 3 - 티스토리 블로그에 웹폰트 적용하기 게시물을 참고 해서 변환된 ttf, eot, svg, woff 파일을 블로그나 웹사이트에 올린다.

이제 웹폰트 적용을 위해 CSS에 @font-face를 추가하자. 아래에 소개할 세 가지 CSS는 Font Squirrel의 CSS Format에서 선택할 수 있는 세 가지 옵션이다.

<Fontspring @Font-Face Syntax>

개인적으로 가장 선호하는 방식이며 거의 모든 브라우저에 적용된다. 현재 웹폰트 적용에 관한 CSS 중 가장 널리 사용되는 방식 중 하나다. <참고 4>

@font-face {
	font-family: '글꼴 이름';
	src: url('./images/글꼴 파일.eot'); /* IE9 호환성 보기 */
	src: url('./images/글꼴 파일.eot?iefix') format('eot'), /* IE6-IE8 */
	     url('./images/글꼴 파일') format('woff'), /* Modern Browsers */
	     url('./images/글꼴 파일')  format('truetype'), /* Safari, Android, iOS */
	     url('./images/글꼴 파일.svg#svgFontName') format('svg'); /* Legacy iOS */	}

셋째 줄까지는 이전과 똑같다. IE에 사용할 eot 파일을 지정한다. 여기서 셋째 줄과 넷째 줄에 두 번 eot 파일을 지정한 이유는 IE9의 호환성 보기 때문이다. 이전에 eot 파일에 따로 src:url( )을 지정한 이유는 IE는 src에 eot 파일 외 다른 파일이 있으면 eot 파일 외의 다른 파일까지 모두 읽어오려고 시도하고 그 때문에 제대로 웹폰트를 불러오지 못하거나 404 에러가 발생했기 때문이다. 이 문제를 해결하기 위해 eot 뒤에 물음표(?)를 추가했고 - 일종의 버그를 사용한 트릭이다. eot 뒤에 ?를 사용하면 IE는 query string으로 인식하고 뒷부분을 읽어오지 않는다. - 이로써 IE가 eot 외에 다른 형식을 읽지 않도록 제한했다. src:url('글꼴.eot?') format('eot'),url('글꼴.woff') format('woff')와 같은 형식으로 사용할 수 있었다는 의미다. 그러나 IE9의 호환성 보기에서는 IE7 또는 IE8을 사용해서 페이지를 표시하는데 여기서 사용하는 IE7과 IE8에선 앞에서 이야기한 버그가 수정되어서 ?가 추가된 eot 파일은 적용되지 않는다. 이런 이유로 셋째 줄에 IE9 호환성 보기만을 위한 src를 삽입하고 넷째 줄부터 다시 src를 지정한다.

넷째 줄은 앞에서 이야기한 ?를 사용해서 eot 파일을 지정한다. 그다음은 최신 브라우저 대부분에서 지원하는 woff를 정의한다. 그 뒤로 ttf, svg 순으로 font-face를 지정하면 끝이다. IE는 eot를 사용하고 Chrome, Opera, Safari, Firefox는 woff를 사용한다. 만약 IE9가 어떤 이유로 eot를 불러오지 못했을 땐 woff를 사용한다. 마찬가지로 Chrome, Opera, Firefox, Safari가 최신 버전이 아니라서 woff를 지원하지 않는다면 그다음 ttf를 불러와서 사용한다. ttf를 지원하지 않는 이전 버전의 모바일 사파리에선 svg를 사용한다. 위 방법은 앞에서 이야기한 세 가지 사항(WOFF, IE9 호환성 보기, 로컬 글꼴)을 모두 충족하며 이 방법으로 현재 사용되는 거의 모든 브라우저에서 웹폰트를 적용할 수 있다. (* svg 파일 이름 뒤에 #svgFontName 부분은 svg 파일을 메모장으로 연 다음 <font id=" "을 찾아 id 부분을 붙여 넣으면 된다.)

실제로 다음과 같이 적용할 수 있다.

@font-face {font-family: "c_l"; src: url('./images/C_L.eot'); src: url('./images/C_L.eot?iefix') format('eot'), url('./images/c_l.woff') format('woff'), url('./images/C_L.ttf') format('truetype'), url('./images/c_l-web.svg#webfontYkqvRtpy') format('svg')}

만약 로컬 글꼴을 사용하도록 수정하려면 두 번째 src: 뒤에 local('글꼴 이름'), 를 삽입한다. 또 svg 뒤의 id(#webfontYkqvRtpy)는 생략할 수 있다.

<Bulletproof @font-face: Smiley variation>

위 방법 외에 많이 사용하는 것으로 Paul Irish가 제안한 Bulletproof @font-face: Smiley variation이 있다.

@font-face {
  font-family: '글꼴 이름';
  src: url('./images/글꼴 파일.eot');
  src: local('☺'),
         url('./images/글꼴 파일.otf') format('opentype');}

이 방법은 local 부분에 글꼴 이름으로 절대 사용하지 않을 것 같은 스마일 아이콘을 삽입해서 로컬 글꼴 사용을 제한했다. 이 방법으로 eot, woff, otf/ ttf, svg를 모두 적용하면 아래와 같이 된다.

@font-face {
  font-family: "글꼴 이름";
  src: url("./images/글꼴 파일.eot");
  src: local("☺"),
    url("./images/글꼴 파일.woff") format("woff"),
    url("./images/글꼴 파일.otf") format("opentype"),
    url("./images/글꼴 파일.svg#filename") format("svg");  }

@font-face {
  font-family: "이탤릭 글꼴 이름";
  src: url("./images/이탤릭 글꼴 파일.eot");
  src: local("☺"),
    url("./images/이탤릭 글꼴 파일.woff") format("woff"),
    url("./images/이탤릭 글꼴 파일.otf") format("opentype"),
    url("./images/이탤릭 글꼴 파일.svg#filename-ital") format("svg");  }

* How to use CSS @font-face 참고

위 방법 역시 스마일 아이콘을 사용하고 eot, woff, otf, svg가 모두 적용된 것을 확인할 수 있다. 만약 기울임, 굵게 등의 효과를 사용하려면 위의 방식처럼 일반 글꼴과 이탤릭 또는 볼드 글꼴 두 가지를 모두 블로그에 올리고 CSS에서 역시 두 번 지정한 다음 실제 사용할 때 일반 글꼴은 '글꼴 이름'으로, 이탤릭은 '이탤릭 글꼴 이름'으로 지정하는 방식을 사용하면 된다.

그 외에 EOTFAST를 배포한 Readable Web의 Mo’ Bulletproofer @Font-Face CSS Syntax도 있다. 이 방식은 하나의 웹폰트를 적용하는데 @font-face를 두 번 사용하는 방식이라 개인적으로 좋아하지 않는다. 관심 있는 사용자는 위 링크에서 원문을 확인할 수 있다.

아래는 Fontspring @Font-Face Syntax을 사용해서 웹폰트를 적용한 모습이다. IE, Chrome, Opera, Safari에서 웹폰트가 적용되는 것을 확인할 수 있다. 단, Firefox는 도메인 문제로 적용되지 않고 Verdana로 표시된다.

웹폰트 적용 전웹폰트 적용 후
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mauris velit, et varius massa. Aliquam in nulla in tortor tincidunt aliquam. Mauris ullamcorper ante ac lectus dignissim quis convallis diam dictum. Integer vestibulum urna vitae lacus mattis consequat. Praesent quis lorem non purus interdum bibendum sit amet at risus. Praesent erat nibh, elementum quis bibendum id, interdum ac justo. Maecenas bibendum eros in eros mattis in ultrices urna tincidunt. Mauris gravida nulla quis nunc condimentum viverra quis lobortis orci. Vestibulum tempus odio a neque congue pretium. Nunc congue accumsan nibh euismod lacinia. Integer dolor nulla, molestie ornare fringilla vitae, gravida ac nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mauris velit, et varius massa. Aliquam in nulla in tortor tincidunt aliquam. Mauris ullamcorper ante ac lectus dignissim quis convallis diam dictum. Integer vestibulum urna vitae lacus mattis consequat. Praesent quis lorem non purus interdum bibendum sit amet at risus. Praesent erat nibh, elementum quis bibendum id, interdum ac justo. Maecenas bibendum eros in eros mattis in ultrices urna tincidunt. Mauris gravida nulla quis nunc condimentum viverra quis lobortis orci. Vestibulum tempus odio a neque congue pretium. Nunc congue accumsan nibh euismod lacinia. Integer dolor nulla, molestie ornare fringilla vitae, gravida ac nisi.


  • 프로필사진
    Favicon of https://rantaworks.tistory.com BlogIcon rantaworks2011.06.25 01:17 신고

    안녕하세요. 티스토리 사용자입니다. ^^ 이렇게 꼼꼼히 정리해주셔서 웹폰트 잘 적용했습니다. 가장 선호하신다는 참고4 방식으로요. ㅎㅎ 정말 감사합니다~!

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

      잘 적용된 것 같네요. 글씨가 조금 작긴 하지만, 귀여운 것이 보기 좋습니다^^
      블로그에서 멋진 사진과 이미지 잘 보고 갑니다.
      혹시 메인 이미지는 직접 만드신 건가요?
      아기자기한 게 한참 보고 있으니 왠지 놀이공원 갔다 온 기분입니다.
      태풍 조심하시고 즐거운 주말 보내세요^^

  • 프로필사진
    알 수 없는 사용자2011.06.25 09:49

    ㅇ_ㅇ

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

      방문 고맙습니다^^
      혹시 지금 웹폰트 적용 하신건가요?
      ~ 커피향가득 글꼴이 어떤 건지 몰라 적용된 상태인지 모르겠네요.
      이숑숑♥님도 주말 잘 보내세요!

  • 프로필사진
    은상2011.12.14 17:19

    상세한 글 감사합니다! 너무너무 알기 쉽게 잘 설명해주셨네요:) 다름이 아니라 말씀하신 방법대로 @font-face kit Generator를 사용해보려니 2메가 이상은 업로드가 안되네요. 그래서 EOTFAST와 sfnt2woff를 이용했습니다. 문제는 현재 나눔고딕 tff 파일이 4메가이고 eot, woff 파일조차도 2메가 정도 되네요. 외국폰트들은 그것에 한참 못미치기에 로딩 시간이 좀 길어질 거 같아서요. 혹시 tff파일을 줄이는 방법이 없을까요? 잘 쓰이지 않는 문자열을 없앤다던지 - 제가 전문가가 아니라서 어떻게 수정하고 어느 부분을 빼야하는지도 잘 모르는데요. 혹시 그에 관련해 글을 쓰신다던가 수정한 나눔고딕 폰트 패밀리를 배포하실 생각이 있으신지 궁금합니다:D

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2011.12.16 15:42 신고

      FontCreator 등 글꼴을 편집할 수 있는 프로그램이 있습니다. 아마 전부 유료 프로그램일 겁니다. 해당 프로그램으로 나눔고딕 파일을 열면 네모칸 안에 글자가 그려져 있습니다.

      얼핏보면 키보드 같은 느낌입니다. 그 중에서 쭉 내려가다보면 일반 상황에서 사용되지 않는 글자가 있습니다. 예를 들자면 뷁 같은... 실제로는 한글에 없는 글자가 모두 포함되어 있습니다.

      그런 것들은 전부 선택해서 삭제하시면 되구요. 그리스어나 러시아어 알파벳, 절대 사용하지 않을 특수문자 등도 삭제하시구요. 한자 지우고...
      아, 보통 폰트 파일 맨 뒷부분이 ㄱ ㅏ ㅓ 이런 식으로 상황에 맞는(?) 자모음이 위치하고 있습니다.

      간다 라는 단어에서의 ㄱ 은 고기 라는 단어에서의 ㄱ 과는 모양이 다른데 그걸 지정한 부분이 있습니다. 이 부분도 삭제하셔도 별 상관 없습니다.

      훑어보면서 지울꺼 지우고 저장하면 아마 꽤 줄일 수 있을겁니다. 그리고 만약 더 줄이고 싶으시면 헤움 글꼴이나 기타 용량이 작은 글꼴을 열어보고 거기 있는 글자만 남기고 다 삭제하시는 방법도 있습니다.

      그러나 이 방법은 필요한 글자가 삭제될 수 있어서 추천하진 않습니다.
      예전에 수정한 나눔고딕 파일은 사용하지 않아 삭제해버려서 보내드리고 싶어도 보내드릴수가 없네요;;;

      혹시 추가적으로 궁금하신 내용 있으시면 덧글 남겨주세요. 필요하면 포스팅 하던가 하겠습니다. 좋은 하루 되세요!!

  • 프로필사진
    온라인라이프2013.09.14 05:24

    내용잘 보았습니다
    http://www.pagemk.com/test/font/font3.html

    이렇게 적용해보았는데 익스플로러8 에선 잘뜨는데

    파이어폭스나 크롬에선 잘 안뜨는데 뭐가 문제인지 가르쳐주세요 ㅠㅠ

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2013.09.15 00:14 신고

      안녕하세요, 올려주신 링크를 확인해보니 웹폰트를 정의하는 @font-face 부분은 문제가 없는데 실제로 body에 스타일을 적용하는 부분이 조금 문제가 있어서 적용이 안된것입니다.

      font-family로 지정한 웹폰트 이름이 문자로 된 이름이라면 적용이 되었을텐데 현재는 '1'이라는 숫자로만 되어서 글꼴을 지정할 때 font-family: '1' (작은 따옴표)나 font-family: "1" (큰 따옴표) 와 같은 방식으로 사용하셔야 합니다.

      아래와 같이 소스를 수정하면 제대로 표시될 것입니다.

      body,table,tr,td,select,input,div,form,pre,textarea,p,font{
      font-family: '1';
      font-size: 12pt;
      }

      아, 그리고 font-size 등 스타일시트(CSS) 내부의 속성과 속성 값을 연결하는 기호는 등호(=)가 아니라 콜론(:) 입니다. font-size=12pt와 같은 형식으로 CSS를 작성하면 해당 스타일이 적용되지 않으니 주의하셔야 합니다~

  • 프로필사진
    Favicon of https://imaesblog.tistory.com BlogIcon Cacka IMae2020.02.25 11:07 신고

    바퀴의 블로그Software Hardware Game Technology

    https://roachsblog.tistory.com/
    어떤폰트 알고싶어용 알려주세용 ㅎ