1. Testing @font-face Support on Mobile and Tablet

    As of today, the support of @font-face is quite unknown on mobile and tablet. Well, we happen to use font icons on the BBC Responsive News website and we have had many problems when trying to detect which browser can be served @font-face rules and deal with it correctly. We decided to document our findings and share them to the community.

    A few attempts to document font-face support across desktop devices, including the article @font-face feature detection on Paul Irish’s blog, are often misleading and deprecated when it comes to the mobile world of pain. The number of Modernizr open issues on GitHub related to font-face only shows that this is not a problem anyone has tackled yet.

    Opera Mobile and Opera Mini don’t make our lives much easier

    Testing

    We have 3 glyphs from our UX icon set in this @font-face test page, we load the font using @font-face and we run a feature detection script alerting what is reported by the browser (@font-face supported or not?).

    Here is the base CSS:
    @font-face {
      font-family: 'GELIconsFull';
      src: url('fonts/gel-news-icons-v3/gelnewsicons-regular-webfont.eot');
      src: url('fonts/gel-news-icons-v3/gelnewsicons-regular-webfont.otf') format('opentype'),
           url('fonts/gel-news-icons-v3/gelnewsicons-regular-webfont.eot?#iefix') format('embedded-opentype'),
           url('fonts/gel-news-icons-v3/gelnewsicons-regular-webfont.woff') format('woff'),
           url('fonts/gel-news-icons-v3/gelnewsicons-regular-webfont.ttf') format('truetype'),
           url('fonts/gel-news-icons-v3/gelnewsicons-regular-webfont.svg#GELIconsFullRegular') format('svg');
      font-size: normal;
      font-weight: normal;
    }
    And the JavaScript alert:
    if (Modernizr.fontface) {
        document.write('Browser says @font-face IS supported');
    } else {
        document.write('Browser says @font-face NOT supported');
    }

    We deliberately excluded Internet Explorer 6, 7 and 8 of our test suite, since we simply do not support them at the moment.

    Results

    Most mobile browsers will give a straight, honest answer, but some of them are simply lying about their capabilities (the best known example being IE9 in Windows Phone 7).

    We had the best results using Modernizr’s feature detection (with a small custom build). Previously, we were using this script: https://gist.github.com/3873753 but we were having too many false positives.

    Support @font-face

    Browsers that report they support @font-face and display glyphs as expected.

    • iOS 4.0 - Safari
    • iOS 6 - Safari
    • iOS 6 - UCBrowser
    • iOS 6 - Dolphin
    • Android 2.2 - Default Browser
    • Android 4 - Default Browser
    • Android 4 - Opera 12 Mobile (Nexus 7)
    • Android 4 - Chrome
    • Android 4 - Firefox
    • Android 4 - Opera Mobile 12 (weird bug, cf infra)
    • Android 4 - Dolphin
    • BBOS 6 - stock browser
    • Windows 8 x86 - IE10
    • Windows Phone 8 - IE

    Don’t support @font-face

    Browsers that report they have NO support for @font-face and don’t display glyphs correctly:

    • iOS 6 - Opera Mini
    • Android 4 - Opera Mini
    • BBOS 4 - stock browser
    • BBOS 5 - stock browser
    • BBOS 6 - Opera Mini

    False positives

    Some browsers declare they support @font-face but don’t display the glyphs correctly…

    These phones deserve nothing but to be thrown.
    • Symbian 10 - Nokia Browser 8.3.1.4
    • Android 2.1 - stock browser
    • Android 2.1 - Dolphin
    • WebOS 2 - stock browser
    • WebOS 3 - stock browser
    • Android 4 - UCBrowser
    • Windows Phone 7 - IE9

    Oddities

    Opera 12 Mobile on Nexus 7 has a weird bug where it doesn’t display glyphs when there is a document.write() on the page (bug viewable here).

    UCBrowser won’t display the JavaScript alert() so we ran the test with document.write() instead.

    Notes

    Microsoft uses UA Sniffing in their redesigned website to exclude Windows Phone false positives. This is quite funny:

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

    No test suite is perfect, but we found that Modernizr was the best one for @font-face. It’s a shame that it is too big to be included inline in our pages.

    Going forward

    Now that we have a pretty good idea of what browsers and devices combinations do support @font-face (or not), we can make informed decisions going forward:

    • Test more Symbian phones (we only have one for now)
    • Exclude false positives with UA sniffing combined to our Cut The Mustard test
    • Improve our current @font-face detection script with something closer to Modernizr’s tests
    • Share our font-face detection script (or improve an existing one if possible)

    Call for Feedback

    If you own a phone or use a browser that we didn’t include in our tests, you can give our testing page a spin at http://www.kaelig.fr/fftest/, and send your results to kaelig@deloumeau.fr or simply comment this blog post!

    All results are welcome and will be very helpful. Plus, testing only takes a few seconds.

    Many thanks to @dblooman for his role in this testing session. You should read his blog: Mobile testing for dummies.

    Edit 11 Oct 2012: we added manually a few devices to our detection script so they don’t get the @font-face. Here is the updated regular expression we use to exclude false positives in our feature-detection function:

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

    It excludes Android 2.0 and 2.1, Opera Mobile (which is supposed to support @font-face, but we couldn’t get it to work in our stack), Opera Mini, all Nokia devices (which is a bit too aggressive, but gives a better user experience to most users than having no icon displayed), UC Browser (very popular in China), Windows Phones, XBoxes, and Zune players.

    Edit 7 Dec 2012: updated supported devices with Windows Phone 8 (thanks to Charles from Microsoft) and Android 2.2 (kudos to Arnaud).

    Edit 25 Feb 2014: Nokia released an Android smartphone that supports @font-face. If you use the above regular expression, please use it carefully or change it so that Nokia Android is detected as a platform that does support @font-face. In most cases, I’d recommend using SVG instead of fonts for resolution independant icons. Ian Feather describes why SVG might be a better option in his post Ten reasons we switched from an icon font to SVG, published the 3rd of January 2014.

Notes

  1. dsiphoebe reblogged this from kaelig
  2. jalbertbowdenii reblogged this from kaelig
  3. front-end-tips reblogged this from kaelig
  4. experience-ss reblogged this from kaelig
  5. therobledo reblogged this from kaelig
  6. boldewyn reblogged this from kaelig
  7. tukangslicing reblogged this from hengkiardo
  8. hengkiardo reblogged this from kaelig
  9. kaelig posted this