Search code examples
javascriptbrowser-feature-detectionwoff

Detect WOFF support with JavaScript?


I have a situation where I’m using Data-URIs to load fonts and only want to use one file type, WOFF. It’s also critical that a fallback font is not used so I’m looking for a way to detect if WOFF is supported with JavaScript. Is it possible to detect WOFF (not WOFF2) support?

This question has been asked before (Detecting with Javascript whether a Browser supports Web Open Font Format (Woff) or not) but the answers given and accepted were not about detecting WOFF support.


Solution

  • It looks like the only browsers that don't support WOFF are IE 8, Opera Mini, and Android before 4.3: http://caniuse.com/#feat=woff

    Then you can check for IE8 by seeing if addEventListener exists and Opera Mini by seeing if operamini exists:

    // from http://stackoverflow.com/a/19572784/4338477
    function getAndroidVersion(ua) {
        ua = (ua || navigator.userAgent).toLowerCase(); 
        var match = ua.match(/android\s([0-9\.]*)/);
        return match ? match[1] : false;
    }
    
    if ((document.all && !document.addEventListener) || 
            (!!window['operamini']) || 
            (parseFloat(getAndroidVersion() < 4.4)) {
        // IE 8, Opera Mini, Android 4.3 or lower: No WOFF support
    } else {
        // Supports WOFF
    }