웹폰트 말썽이네..

2010. 9. 2. 02:25Life

 오랜만에 웹폰트 좀 써보려고 살짝 작업을 좀 했다. 웹폰트는 내 컴퓨터에 설치되어 있지 않은 글꼴로 지정된 웹 페이지를 볼 때 기본 글꼴로 나오는 대신 해당 웹 페이지에서 제공하는 웹폰트를 사용해서 페이지를 표시하는 것이다. 예를 들어 '맑은 고딕' 글꼴을 사용하도록 만든 블로그를 맑은 고딕이 없는 XP 사용자가 방문하면 웹 브라우저에서 지정한 기본 폰트나 시스템 기본 폰트를 사용해서 표시한다. 그러나 맑은 고딕을 웹폰트로 지정하면 내 컴퓨터에 맑은 고딕이 없어도 해당 블로그는 항상 맑은 고딕으로 표시된다.

 원래 웹폰트는 IE에서만 지원하는 기능이었다. 게다가 그것도 ttf가 아닌 otf도 아닌 eot라는 형식의 폰트를 사용해야 했다. eot는 어디서 구하냐고? ttf 파일을 변환해야 한다. 그럼 웹폰트를 사용하려면 ttf를 eot로 변환하고, 블로그나 웹사이트에 eot 파일을 올리고, 스킨이나 웹사이트를 수정해서 특정 글꼴을 지정할 때 해당 eot 파일을 사용하도록 연결해야 한다.

 그런데 요즘엔 개나 소나 - 결.코. 파폭, 크롬, 사파리, 오페라 등등을 비하하는 내용 아님. 나도 IE 싫어하니까. - 다 웹폰트를 지원한다. 이론적으로.

 파이어폭스, 크롬 / 크롬 플러스, 사파리, 오페라 모두 ttf, otf 파일을 그대로 웹폰트로 사용할 수 있다. 우왓 좋은데~ 변환도 필요 없고!!

 세상 이치가 다 그렇듯 장단점이 있다. eot는 만드는 과정에서 압축하므로 크기가 ttf 1/3~1/2 정도 밖에 안된다. 또 글꼴을 바로 확인할 수 없다. 글꼴 크기가 작으니 웹페이지 로딩 속도에도 좋고 무엇보다도 IE에서 100% 적용된다. 그러나 그 귀찮다는 변환 과정 - 사실 eotfast 프로그램을 사용하면 파일 하나 변환하는데 몇 초 안 걸린다. 귀찮을 것도 없다는 이야기다. - 을 거쳐야 하고 IE에서만 지원하는 기능이다. 또 eotfast를 사용하지 않고 weft로 정석으로 변환하면 특정 사이트에서만 사용할 수 있게 된다.

 파이어폭스, 크롬, 사파리, 오페라는 모두 같은 문법으로 웹폰트를 적용한다. 그래서 IE와 비 IE 브라우저에서 모두 지원하도록 블로그 스킨 파일에 필요한 부분을 추가했다. 그런데. 왜 크롬 플러스와 IE에선 제대로 표시되는데 파이어폭스와 오페라에선 안되지?

요게 웹폰트가 지정되어야 하는디, 잘 안되는 구먼..

 이게 웹폰트로 나와야 하는데 IE와 크롬 플러스만 제대로 나오고 오페라와 파이어폭스는 기본 글꼴로 표시된다. 이런...

 예전에 크롬을 사용할 때였으면 너무나도 기분 좋게 사용했겠지만, 다시 파이어폭스로 돌아온 지금 아쉽기 짝이 없다. ㅠㅠ 젠장 왜 안되는 거니?

 혹시 파이어폭스 설정과 연관이 있을까봐 새로 받아서 해봐도 역시 적용이 안된다. 되면 다 되고 안되면 다 안되야 하는데 왜 크롬은 되고 다른 넘들은 안되는거니? 누구 아시는 분 지나가다 들러서 좀 알려주새요 ㅠㅠ

  • 프로필사진
    Favicon of http://ragpicker.egloos.com BlogIcon ragpickEr2010.09.02 02:33

    @_@;;
    저는 컴맹인지라..읽어봐도 잘 모르겠어요..ㅜ0ㅜ;;ㅋㅋ

    제가 이렇게 살아요..
    답답네이션..@_@;;

    모쪼록 잘~~~!! 해결되길 바랍니다..^^*;

  • 프로필사진
    Favicon of http://playing.thoth.kr BlogIcon Playing2010.09.02 08:39

    안녕하세요~ 지금 태풍이 와서 전철이 운행 안된다는 이유로 집에서 놀고 있습니다 하하
    휴 새벽 3시부터 바람소리에 잠을 깼는데요 계속 집 전기가 나갔다 들어오고, 옆 집은 비 센다고 난리고, 바람이 심해서 우비를 입고 나가야 하는데 군대 때 입었던 우비는 없고, 비닐 일회용밖에 없어서 이러지도 저러지도 못하고 있네요 ㄷㄷ;; 지금은 바람님 피곤하신 지 잠잠

    아 폰트는 정말 잘 모르겠는데요..
    블로그에 다른 타인이 보는 폰트 종류를 미리 지정할 수 있다는 이야기인가요?
    아니면 다른 블로그를 방문할 때 지정을 하면 원하는 폰트로 볼 수 있다는 건가요?

    저는 '오페라' 유저이기 때문에 마음 편히 '궁서' 폰트로 모든 웹 사이트를 보고 있습니다
    그런데 지정된 폰트를 출력하는 다음이나 네이버 같은 포털을 제외하면 궁서로 잘 나오는 거 같네요(어른이나 아이들 눈에는 궁서가 구별이 쉬운 거 같더군요.. 좀 굵고 큰 거 같아요 ;;) 이 블로그는 지금 '궁서'로 보이지 않는 거 같기도 하고.. 아이고 폰트 구별을 못하겠네요 하하

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.02 11:34 신고

      웹폰트는 내 블로그를 볼 때 다른 사람의 컴퓨터 화면에서 보이는 글꼴을 미리 지정하는 것이고

      내가 다른 블로그를 방문할 때 지정한 폰트로만 표시하는건 웹 브라우저의 기본 글꼴을 조정해서 설정할 수 있습니다.

      네이년같은 포털에서 궁서가 안나온다면 아마 제 블로그도 궁서로 보이지 않을 것 같은데요. 제가 맑은 고딕을 기본으로 사용하도록 지정했거든요. 맑은 고딕이 없으면 궁서로 나올수도 있을 것 같네요^^

  • 프로필사진
    Favicon of http://boksuni.tistory.com BlogIcon 복돌이^^2010.09.02 09:50

    오....폰트에도 이런 사실들이 숨겨있었네요...
    전 완전 어려우네요..첨부터 끝까정...^^

    행복한 하루 되세요~

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

      좀 더 깊숙히 들어가면 더 많은 사실이 숨어있다죠~
      저도 완전 어렵네요 ㅜㅜ

      행복한 하루 보내세요~
      태풍 조심하시구요^^

  • 프로필사진
    Favicon of https://qtotpz.tistory.com BlogIcon 윤뽀2010.09.02 13:57 신고

    흠, 웹폰트 적용이 브라우저별로 좀 다르게 보여서 까다롭더라구요 ㅠㅠ
    해결 잘 하시길 바랍니다

  • 프로필사진
    Favicon of https://mydascap.tistory.com BlogIcon 마이다스의세상2010.09.02 14:23 신고

    아 ㅠㅠ 저에겐 너무나 어려운 세계 ㅠㅠ

  • 프로필사진
    알 수 없는 사용자2010.09.02 16:21

    폰트도 호환성을 타나 보군요...

    저도 한번 이것저것 해봐야겠내요~

    글 감사히 읽고 갑니다^^

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.02 18:38 신고

      호환성 문제는 아닌것 같은데 아직 원인을 모르겠습니다 ㅠㅠ
      빨리 원인을 찾아서 밝혀내야겠습니다!!

  • 프로필사진
    Favicon of https://reinia.net BlogIcon 레이니아2010.09.02 17:54 신고

    제가 현재 파폭을 쓰는데.. 적용되지 않네요^^;
    저도 대충 시도해 보다가 지금은 그냥 맘편히 포기했어요...(...)

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.02 18:34 신고

      제 파폭에도 적용이 안되네요^^;
      이론적으론 파폭, 크롬, 오페라, 사파리, IE 다 되어야 하는데 크롬이랑 IE밖에 안되니 좀 아쉽습니다 ㅠㅠ

  • 프로필사진
    알 수 없는 사용자2010.09.02 22:03

    오페라 같은 경우 웹표준을 너무 잘 지켜서 탈이지요... ^^;; 그만큼 가볍고 기능도 다양해 저도 즐겨 사용합니다...

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

      그게 이상합니다 정말 ㅠㅠ
      CSS3에 포함된 @font-face를 지원해야 하고 @font-face와 관련된 글에서도 파폭 3.1이후 오페라 10 이후 버전에서 웹폰트를 지원한다고 하는데 왜 안되는지 모르겠어요^^;;

      오페라를 사용하진 않지만, 찬찬히 뜯어보면 가장 만듦새가 좋은 웹 브라우저가 아닌가 생각합니다. 다만, 불여우에 익숙해지다 보니 바꾸기가 쉽지 않아서 포기했습니다.

    • 프로필사진
      알 수 없는 사용자2010.09.03 14:06

      물론 오페라 같은 경우 불여우에서 자주 쓰는 것 같은 플러그인이 미리 내장되어 있으면서도 용량도 착하고 메모리도 적게 먹지요... 다만 우리나라 처럼 웹표준을 무시하는 나라에서는 "잠시 참아주세요..." 이지요... 불여우가 요즘 들어 많이 가벼워지고 플러그인 꾸미는 재미가 쏠쏠하지요... 다만 그만큼 메모리의 압박은 각오하셔야 ㅋㅋ... 제가 오페라를 즐겨쓰는 이유는 다른 여타 웹브라우저의 동향을 미리 살펴볼 수 있다는 점이겠지요... 그 정도로 오페라가 사용자는 그리 많지 않지요... 그러나 파워유저들의 주목을 오페라가 한몸에 받는 이유는 아마도 오페라가 먼저 해당 기능이 들어가면 차후에 다른 브라우저들도 그 기능이 들어간다는 점이지요... 물론 오페라도 장점도 있지만 단점도 있는 브라우저 이지만, 가벼움에 있어서는 크롬도 비할 수도 없지요...

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.03 22:07 신고

      오페라에서 웹폰트가 지원되지 않던 이유가 경로에 한글이 포함되어 있어서네요 ^^;;;; 경로에서 유니코드 문자를 빼버리니 간단하게 해결됐습니다. ㅎㅎ

    • 프로필사진
      알 수 없는 사용자2010.09.04 01:11

      해결되었다니 다행입니다... 오페라가 많은 브라우저 가운데 웹표준도 준수합니다만, 또한 오류문제도 거의 없지요... 다만, 우리나라와 같은 친 MS 국가에서만 이상하지만요...

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

      넵, 친M$ ㅎㅎ 그나저나 불여우 사용자로써 한글 웹폰트를 불여우만 지원을 안하니 아쉽네요 ㅠㅠ 갈아탈 때가 된걸까요 ㅎㅎ

  • 프로필사진
    알 수 없는 사용자2010.09.03 04:11

    왜 안되는걸까요 ㅠㅠ 폰트마저도 브라우저별로 다르다니~

    • 프로필사진
      Favicon of https://circlash.tistory.com BlogIcon circlash2010.09.03 09:39 신고

      일단 어제 늦게까지 연구해보고 일부 결론 내렸습니다 ㅎㅎ
      나중에 정리해서 글로 써놔야겠어요.
      며칠 지나면 또 잊어버릴테니까요 ^^;

  • 프로필사진
    지나가다..2013.07.08 18:12

    시대가 지난 글같아 보이긴 하지만.. 같은 문제로 살짝 고민했었는데 저같은 경우엔 format 이하 구문을 지워주니 파폭에서도 정상동작하네요. 이유는... 모르겠지만요