Font-face check from Modernizr

Question

Modernizr detects CSS3 font-face support.

http://modernizr.com/download/

How do I get only the source of the font-face test outside the modernizr?

There's a file in repo related to this test, but I'm not sure how to use it https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/fontface.js

Answer 1

That file doesn't seem to be easy to decouple from the rest of Modernizr. In my opinion it would be much easier to actually go and use Modernizr.

You can customize it in the downloads section in a way that you only donwload the checks that you need, so if you only need the font-face test, you would only download that part.

If for some reason you just do NOT want to use Modernizr, a front-end developer called Paul Irish has done a @font-face Feature Detection that probably is more or less what you are looking for. Hope that it helps.

Answer 2

Try this: http://jsbin.com/litava/3/edit

The following code should work. I suggest you really should be using Modernizr as they test their implementation properly , and they maintain it.

// supportsFontFace released to public domain by Robocat. Thanks are also due to Modernizr and the number 9
function supportsFontFace() {

  function blacklist() {
    var match = /(WebKit|windows phone.+trident)\/(\d+)/i.exec(navigator.userAgent);
    return match && parseInt(match[2], 10) < (match[1] == 'WebKit' ? 533 : 6);
  }

  function hasFontFaceSrc() {
    var style = document.getElementById('fontsupporttest');
      var sheet = style.sheet || style.styleSheet;
      var cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : '';
      return /src/i.test(cssText);
  }

  return !blacklist() && hasFontFaceSrc();
}

And add the following style:

<style id=fontsupporttest>@font-face{font-family:"font";src:url("https://")}</style>

I rewrote it so it doesn't have any copyright issues, and simplified it a little that makes it blacklist less conservatively (doesn't support any webkit below 523 which also prevents webos, doesn't support windows phone < 8, and doesn't support browser prefixed font-face like -webkit-font-face).

Answer 3

Custom build Modernizr with Gulp :

gulpfile.js

'use strict';

var modernizr = require('gulp-modernizr');

gulp.task('modernizr', function() {
  gulp.src(path.resolve(require.resolve('modernizr'), '../../**/*.js'))
    .pipe(modernizr('modernizr.js', {
      tests: [
        'fontface',
      ],
    }))
    .pipe(gulp.dest('app/src/js'));
});

gulp.task('default', ['modernizr']);