안녕하세요?

모든 스킨 개발자님들과 함께 웹폰트에 대한 사용 방식에 대해 얘기하고 결정하고 싶어서 글을 남겼습니다.

간단 명료하게 남기겠습니다.^^

현재 웹폰트 사용의 문제점

사이트 구성을 다음과 같이 한다면,

레이아웃 스킨 + 게시판 스킨 + 위젯 스킨

모두 다른 개발자이며 모두 "나눔고딕"을 쓴다고 가정했을 때입니다.

이렇게 되면 한 페이지에서 불러오는 나눔고딕 폰트파일은 3개가 됩니다.

레이아웃의 나눔고딕, 게시판의 나눔고딕, 위젯의 나눔고딕

왜 이런 현상이 일어나냐면

폰트가 설치된 폴더와 폰트파일명이 다르고 CSS에서 지정하는 폰트명도 다르기 때문입니다.

이렇게 되면 엄청난 트래픽이 발생합니다.

해결 제안 방법

일단 폰트파일이 공유가 되어야 합니다.

지금까지는 각각의 스킨 폴더에 따로따로 저장해서 같이 배포했었는데,

제안하는 방법은

xe설치폴더/fonts 라는 폴더를 만들어 폰트파일을 공유하는 것입니다.

스킨제작자는 폰트가 xe설치폴더/fonts 에 있다는 것을 가정하고 항상 이 폴더로 폰트 경로를 지정해 주면 됩니다.

이렇게 하면

레이아웃 스킨, 위젯 스킨, 모듈 스킨 모두가 이 곳 하나의 파일만 불러들이게 되겠죠.

그럼, xe설치폴더/fonts에 폰트파일은 누가 어떻게 설치하느냐?

사용자가 설치하되 스킨 배포할 때 폰트파일도 함께 배포해서 xe설치폴더/fonts에 업로드하라고 안내하는 방법입니다.

이미 있으면 업로드 안해도 되구요.

가장 좋은 방법은 자료실에 쉬운설치로 통해 폰트 설치가 되었으면 좋겠습니다.

* 예시 파일명(xe설치폴더/fonts/)

나눔고딕 : ng.eot, ng.woff, ng.font.js

나눔고딕 Bold : ngb.eot, ngb.woff, ngb.font.js

* 예시 CSS @FONT-FACE 사용시

@font-face{font-family:ng; src:url('/font/ng.eot'); src:local('☺'), url('/font/ngb.woff') format('woff')}

.example{font-family:"나눔고딕", NanumGothic, ng}

* 예시 Cufon JS 사용시

<load target="/cufon-yui.js" />

<load target="/ng.font.js" />

<script type="text/javascript">

    Cufon.replace('.example');

</script>

반대 의견이나 좋은 의견 모두 남겨주셔서 충분한 검토가 된 후에 확실히 제안해 보겠습니다.^^

이런 문제가 영어는 크지 않은데

한글은 돋움 밖에는 쓸만한 폰트가 없어서 생기는 문제인 것 같습니다.

윈도우에서 나눔고딕 폰트를 기본 채택하길 바라는 마음도...

그리고, 나눔고딕과 같은 기본적으로 사용할 수 있는 웹폰트가 많이 나왔음 좋겠네요.