Why does Modernizr download Google fonts?

Question

I am creating a web application and just installed ssl.

Everything seems fine, except for these two errors that I get from fonts downloaded over an insecure connection. The console offers something that Modernizr does, but I cannot figure out where and how to fix it.

Here's the console output:

The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/rosarivo/v1/OGdIq-p0tOtBN2VMVvO9W_esZW2xOQ-xsNqO47m55DA.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4
The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4

I use TypeKit for my fonts, so I have no idea what these Google Fonts do on the page and why Modernizr will load them.

Answer 1

There is a test for @ font-face to support CCS3 in the full assembly of modernizr. I believe this test code loads some font to see if it works.

, modernizr, .

, , modernizr SSL.

modernizr 2.8.3

/*>>fontface*/
// @font-face detection routine by Diego Perini
// javascript.nwbox.com/CSSSupport/

// false positives:
//   WebOS github.com/Modernizr/Modernizr/issues/342
//   WP7   github.com/Modernizr/Modernizr/issues/538
tests['fontface'] = function() {
    var bool;

    injectElementWithStyles('@font-face {font-family:"font";src:url("https://")}', function( node, rule ) {
      var style = document.getElementById('smodernizr'),
          sheet = style.sheet || style.styleSheet,
          cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : '';

      bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0;
    });

    return bool;
};
/*>>fontface*/

// CSS generated content detection
tests['generatedcontent'] = function() {
    var bool;

    injectElementWithStyles(['#',mod,'{font:0/0 a}#',mod,':after{content:"',smile,'";visibility:hidden;font:3px/1 a}'].join(''), function( node ) {
      bool = node.offsetHeight >= 3;
    });

    return bool;
};