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.
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
}