Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is Modernizr loading Google fonts?

I am building a web app and just installed ssl.

Everything seems to be fine except for these two errors I'm getting about fonts being loaded over an insecure connection. The console suggests it's something that Modernizr is doing, but I can't 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 am actually using TypeKit for my fonts, so I have no idea what these Google Fonts are doing on the page and why Modernizr would be loading them.

like image 276
raphaeltm Avatar asked Oct 31 '22 17:10

raphaeltm


1 Answers

There is a test for @font-face for CCS3 support in the full build of modernizr. I believe this test code loads some font just to see if that is working.

If you don't need that, use the build configurator on the modernizr page to exclude that from your custom built library.

By the way, it seems that the newer version of modernizr loads the fonts over SSL.

Test Code in 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;
};
like image 95
Kai Mattern Avatar answered Nov 10 '22 18:11

Kai Mattern