Page 1 of 1

파이어폭스만 웹폰트 아이콘을 제대로 표시하지 않습니다.

Posted: 2012 12 23 10:02 29
by demun
웹폰트를 이용하여 아이콘을 표시하는 겁니다.
이런 사이트는 많이 있습니다.
icoMoon -> http://icomoon.io/
Font-Awesome -> http://fortawesome.github.com/Font-Awesome/

icoMoon을 예를들어 사용하면 아래와 같습니다.
html
<i class="icon-pictures"></i>

css
@font-face {
font-family: 'icomoon';
src:url('./images/icomoon.eot');
src:url('./images/icomoon.eot?#iefix') format('embedded-opentype'),
url('./images/icomoon.svg#icomoon') format('svg'),
url('./images/icomoon.woff') format('woff'),
url('./images/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

css 코드가 길어서 이렇게만 적을게요.

문제는 다음에서 제공하는 티스토리 블로그에 사용할때의 예시입니다.
폰트를 업로드하고 작성하면 다른브라우져에서는 올바르게 표시가 됩니다.
유독 파이어폭스에서만 표시가 안됩니다.

크롬에서 볼때의 이미지
BlogInfo 앞에 웹폰트 아이콘을 봐주세요.
http://cfile6.uf.tistory.com/image/267B ... 5478350F9C

파이어폭스에서 볼때의 이미지
http://cfile9.uf.tistory.com/image/247E ... 54782F8E76




일단 말씀드리면.
코드상의 문제나 라이센스의 문제는 아닌것으롶 판단됩니다.
많은 검색을 해봤는데.....
파이어폭스는 도메인간의 글꼴을 표시하지 못하는 문제가 있는것으로 판단됩니다.

비슷한 문제의 글
http://www.red-team-design.com/firefox- ... by-default

만약 위의 문제라면 서버를 수정할 수 있는 호스팅에서만 이런 웹폰트 아이콘을 사용할 수 있다는 이야기 입니다.

유독 파이어폭스만 그렇다는 이야기인데 해결방법이 있을까요?