모바일/테블릿의 @font-face 지원여부

(반응형 웹 관련 소식을 전하는 http://responsive.rga.com/ 에 올라온 뉴스입니다.)

@font-face를 모바일/테블릿 기기/브라우져 들이 지원하는지 테스트 한 글입니다.
(출처: http://blog.kaelig.fr/post/33373448491/testing-font-face-support-on-mobile-and-tablet )

@font-face 를 이용한 glyph (즉, 아이콘) 등을 보이는 경우가 많은데, 모바일 기기/브라우져에서 어떻게 나오는지 궁금할 수 있습니다. 대표적인 테스트방법으로 Modernizr 를 이용하여 다음과 같이 테스트 할수도 있습니다.

if (Modernizr.fontface) {
    document.write('Browser says @font-face IS supported');
} else {
    document.write('Browser says @font-face NOT supported');
}

그런데, 한두가지 기기에서는 Modernizr가 된다고 했는데 실제로 되지 않는 경우(false positive)도 있고, 그리고 이것 하나 테스트 하고자 Modernizr를 모바일에 올리기에는 너무 크기에, 이번 실험에서 검증된 '지원하지 않는' 기기들을 UA 문자열 을 기반으로 테스트 하는 정도면 충분할거라고 하네요.

if (!!navigator.userAgent.match(/(Android (2.0|2.1))|(Nokia)|(Opera (Mini|Mobi))|(w(eb)?OSBrowser)|(UCWEB)|(Windows Phone)|(XBLWP)|(ZuneWP)/)) {
    return false;
}

위에서 보듯이, 구버전 안드로이드, 노키아, 오페라, 웹OS, 윈도우 폰, 그리고 마이너 몇개의 경우 지원하지 않는다고 합니다.  재밌는 것은, 마이크로소프트 웹사이트는, 자기네 윈도우 폰으로 접속하는 경우, font face 클래스를 삭제해버린다네요.. ^^;;

/(Windows Phone)|(XBLWP)|(ZuneWP)/.test(navigator.userAgent)&&$("html").removeClass("fontface")

비록, 대부분의 현대적 모바일기기/브라우져들이 대부분 @font-face를 지원한다지만, 오페라나 윈도우 폰의 경우는 좀 의외입니다. :)